Rescript Capitalised Component

Question

From the Rescript Documentation, it is suggested spread can be used to enable passing a pre-existing list to a component. I am confused what exactly MyComponentis in Rescript as I cannot find a way to initialise a component, which can be done with a function in vanilla React.

<MyComponent>...myChild</MyComponent>

where myChild = list{child1,child2}

After several attempts, the followings do not work:

• @JSX div(~children=myChild) , because Rescript asks for wrapping it in a list as in list{myChild}
• @JSX div(~children=list{myChild}), which gives a type error
• Initialising a module named MyComponent, and do <MyComponent> ...myChild </MyComponent>, but this gives the error The value make can't be found in MyComponent
• Initialising a function with a capitalisation escape: let \"MyComponent" = () => ..., but this gives the error The module or file MyComponent can't be found.

What I would love is an example of the initialization of the component MyComponent which can be used as a capitalised tag like <MyComponent>...myChild</MyComponent>. Thank you in advance.

Answer 1

module MyComponent = {
 @react.component
 let make = (~children: list<React.element>) => {
   <div> {Belt.List.toArray(children)->React.array} </div>
 }
}

From Rescript Forum.