The documentation surrounding children with the new JSX3 approach seems to be a bit broken.
It claims that <MyReasonComponent> <div /> <div /> </MyReasonComponent> would pass an array of two elements to MyReasonComponent, and that <MyReasonComponent> <div /> </MyReasonComponent> would pass a single element to MyReasonComponent.
However, my tests indicate that it will always send a single element - never an array. This seems to be the opposite behavior in JSX2, where an array of react elements is always passed, regardless of whether one or many elements are present as children.
Here’s a repo that demonstrates how children work right now between JSX2 and JSX3: https://github.com/harigopal/jsx3-children-issue-demo/
And here’s the JSX3 component that accepts children, with a JSX2 wrapper module:
[@bs.config {jsx: 3}];
[@react.component]
let make = (~message, ~children) =>
<div>
<div>
{
"This is a message sent to AcceptsChildren: " ++ message |> React.string
}
</div>
children
</div>;
module Jsx2 = {
let component = ReasonReact.statelessComponent("AcceptsChildren");
let make = (~message, children) =>
ReasonReactCompat.wrapReactForReasonReact(
make,
makeProps(~message, ~children=children |> React.array, ()),
children,
);
};
The important bit here is the inclusion of children in the call to makeProps in the Jsx2 module, in addition to passing it to wrapReactForReactReact - this seems to be undocumented.
Also note that children from JSX2 must be converted to a React.element (using React.array above) before it is accepted by JSX3, which looks like unintended behaviour.
Does anyone know if this is the expected behaviour? Am I misreading the documentation in some way? My team had to spend a few hours to figure out how to get this working.