How can I share props in ReasonReact?

Question

Summary

Suppose I have a reducerComponent

<TodoList />

that uses statelessComponent

<TodoItem todo />

Here todo is a record type called todoItem.

type todoItem = {
  text: string,
  isDone: bool,
};

But, I can't share todoItem type.

• If I define the type in TodoList.re TodoItem will complain.
• If I define the type in TodoItem.re TodoList will complain.

Sources

Here is my TodoList.re

/** TodoList.re */

// ↓ I defined `todoItem` type
type todoItem = {
  text: string,
  isDone: bool,
};

// state depends on `todoItem` type ↓
type state = {todoList: list(todoItem)};

let component = ReasonReact.reducerComponent("TodoList");

let make = _children => {
  ...component,
  initialState: () => {todoList: []},
  reducer: (action, state) => ...,
  render: self =>
    <div> {List.map(todo => <TodoItem todo />, self.state.todoList)} </div>,
};

And TodoItem.re

/** TodoItem.re */

let component = ReasonReact.statelessComponent("TodoItem")

let make  = (~todo, _children) => {
    ...component,
    render: (_self) => {
        // ↓ I'm getting an error here
        <p>(ReasonReact.string(todo.text))</p>
    }
}

Error message

[1/2] Building ...em-ReactTemplate.cmj

  We've found a bug for you!
  /Users/kkweon/temp/my-react-app/src/components/TodoItem.re 6:37-40

  4 │     ...component,
  5 │     render: (_self) => {
  6 │         <p>(ReasonReact.string(todo.text))</p>
  7 │     }
  8 │ }

  The record field text can't be found.

  If it's defined in another module or file, bring it into scope by:
  - Annotating it with said module name: let baby = {MyModule.age: 3}
  - Or specifying its type: let baby: MyModule.person = {age: 3}

>>>> Finish compiling(exit: 1)

Answer 1

Each Reason file is a module.

So, after defining

type todoItem = {
  text: string,
  isDone: bool,
};

in TodoItem.re

I can call it as

type state = {todoList: list(TodoItem.todoItem)};