reason-react icon indicating copy to clipboard operation
reason-react copied to clipboard

Array of children not allowed

Open AHBruns opened this issue 4 years ago • 4 comments

I'm quite new to ReasonReact. So, there's a good chance I've just missed something, but I've been trying to figure out how to pass an array of children to a component and haven't been able to figure it out. This is what I've made:

code

and this is the error I'm getting from it

Screen Shot 2020-10-06 at 4 32 10 PM

What's even more confusing is that if I manually pass multiple children:

codeFixed

Everything is all good:

Screen Shot 2020-10-06 at 4 41 18 PM

Is this intended behavior, and if so, how do I pass a generated array of children to a component?

AHBruns avatar Oct 06 '20 21:10 AHBruns

Could you try to wrap your array of children in React.array, for example:

module Button = {
  @react.component
  let make = (~buyLinks: array<string>) => {
    <div>
      {React.array(Array.map(name => <a> {React.string(name)} </a>, buyLinks))}
    </div>
  }
}

(playground link)

jihchi avatar Oct 07 '20 00:10 jihchi

Worked like a charm! Thank you. Also, just out of curiosity, is this documented somewhere? If not, I'd highly recommend adding a note about it since it's a very common use-case.

AHBruns avatar Oct 07 '20 00:10 AHBruns

It is documented in new function components doc and old Record API doc.

jihchi avatar Oct 14 '20 13:10 jihchi

It took me like a year to find out that React.array exists.

banacorn avatar Nov 26 '20 06:11 banacorn

It's on the first section of the docs for "Core" @banacorn (https://reasonml.github.io/reason-react/docs/en/components)

Maybe we should have a separate section for this precise error?

I'm closing this, but might be able to fix this soon.

davesnx avatar Jul 10 '23 15:07 davesnx