How can put multiple react components in a single source file?

#1

How can put multiple react components in a single source file?

#2

Each component in the file will usually go inside a nested module. See https://reasonml.github.io/reason-react/docs/en/components#component-naming

#3

I have read that but still have no clue how to use multiple components in a single module. I tried giving different function names as it shows there but it simply does not work

#4 
open ReactEvent.Mouse;
let alt = t => {
  t->altKey;
};
[@react.component]
let square = () => {
  let (state, setState) = React.useState(() => 0);
  <button
    onClick={ev => {
      ev->persist;
      ev->preventDefault;
      (count => ev->alt ? count - 1 : count + 1)->setState;
    }}
    className="square">
    {React.string(string_of_int(state))}
  </button>;
};
[@react.component]
let make = () =>
  <div className="board-row"> <Row$square/> </div>;

This is what document you sent me suggests which does not work at all. Is this simply broken or am i missing something ?

#5

Row$square is a name that, as the documentation says, will appear in the React DevTools. It’s not a name that you would use in your source code itself. In fact, it’s not a valid name in the Reason syntax. So I would expect that to give a syntax error.

To use a component that you defined within the same file itself, you will need to follow my original advice, that is to put the component inside a nested module. Then, you can call it as shown in https://reasonml.github.io/reason-react/docs/en/components#a-note-on-children

#6

I don’t understand how is this relevant to the question I am asking.
Today I am writing the reason for the first time in my life and I am asking a simple question "How can I write multiple components in a single file?"
I have read the docs as I shared above and I don’t understand the way it explains things because there is not even a single line of code showing how to actually use this thing.
I am extremely glad you passed the stage I am at right now and you can understand the docs.
Since I don’t understand how to read the docs your keeping sending me the docs that I cant understant over and over doesnt help me at all.
So is it possible you to write a single line of code showing how I can use the nested thing? You say by yourself <Module$whatever> is invalid syntax so docs do not cover how to use this thing.

#7

Here is an example:

// MyComp.re

module Div = {
  [@react.component]
  let make = (~children) => <div> {children} </div>;
};

[@react.component]
let make = (~text) => <Div> {React.string(text)} </Div>;

Does this make sense?

#9

I tried that already this doesnt work. For some reason the compiler tries to find Div.re and fails

#10

Can you show the error?

#11

Sorry It was due to relative position of the things. I wrote the declaration of the module after. Seems use before declaration is not a thing in reason :slight_smile:

#12

Indeed. In Reason and OCaml things must be declared before usage except in some special cases of recursive definitions.