We have bunch of warnings in our code that looks like this:
Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <u>. See https://reactjs.org/link/warning-keys for more information.
It looks like those warnings are coming from mjml-react because children are passed as third argument to React.createElement. This is most probably wrong. E.g.:
const a = [1, 2];
function hello() {
return (
<div>
{a.map((i) => (<span>{i}</span>))}
</div>
);
}
function hello2() {
return (
<div>
<span>1</span>
<span>2</span>
</div>
);
}
JSX is transformed differently for these two cases:
const a = [1, 2];
function hello() {
return /*#__PURE__*/React.createElement("div", null, a.map(i => /*#__PURE__*/React.createElement("span", null, i)));
}
function hello2() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "1"), /*#__PURE__*/React.createElement("span", null, "2"));
}
It seems, if children is passed as third argument when it is Array, then it is treated as result of Array.map and React issues warning about missing key.
This fix checks if children is Array and in case it is spreads is as arguments to React.createElement.
We have bunch of warnings in our code that looks like this:
It looks like those warnings are coming from
mjml-react
becausechildren
are passed as third argument toReact.createElement
. This is most probably wrong. E.g.:JSX is transformed differently for these two cases:
It seems, if
children
is passed as third argument when it is Array, then it is treated as result ofArray.map
and React issues warning about missing key.This fix checks if
children
is Array and in case it is spreads is as arguments toReact.createElement
.