How can I share props in ReasonReact? - reason

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)};