Render a list of jsx elements with ReasonReact
In javascript/jsx I can just create a list of jsx elements and place that list into the jsx.
const thingDivs = things.map((thing) => (
<div>{thing.name}</div>
)
return (<div>
{thingDivs}
</div>)
But ReasonReact expects the variable to be of type ReasonReact.reactElement
, and so we have to convert the list of jsx nodes we create to an element with the function ReasonReact.array
.
let thingDivs = List.map((thing) =>
<div>ReasonReact.string(thing.name)</div>
, things)
<div className="parentContainer">
(ReasonReact.array(Array.of_list(thingDivs))
</div>
ReasonReact.array
returns a value of type ReasonReact.reactElement
.