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


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


Each component in the file will usually go inside a nested module. See


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

open ReactEvent.Mouse;
let alt = t => {
let square = () => {
  let (state, setState) = React.useState(() => 0);
    onClick={ev => {
      (count => ev->alt ? count - 1 : count + 1)->setState;
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 ?


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


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.


Here is an example:


module Div = {
  let make = (~children) => <div> {children} </div>;

let make = (~text) => <Div> {React.string(text)} </Div>;

Does this make sense?


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


Can you show the error?


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:


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