I'm learning mobX-state-tree, and in their tutorial code, i see this
const App = observer(props => (
<div>
<button onClick={e => props.store.addTodo(randomId(), "New Task")}>
Add Task
</button>
{values(props.store.todos).map(todo => (
<div key={todo.id}>
<input
type="checkbox"
checked={todo.done}
onChange={e => todo.toggle()}
/>
<input
type="text"
value={todo.name}
onChange={e => todo.setName(e.target.value)}
/>
</div>
))}
</div>
));
render(<App store={store} />, document.getElementById("root")); //store???
I have a little confuse, where store was mentioned? Why we can use store as prop, but not prop={store}, for example if i change store to something else, say "abcxyz", then it got error Cannot read properties of undefined (reading 'todos'). So why we have store here. Please tell me, thank you a lot
Their code : https://codesandbox.io/s/310ol795x6?file=/index.js
Their tutorial, this was selection "Getting to the UI" : https://mobx-state-tree.js.org/intro/getting-started
You should post what are you trying to do, but i think you need to understand the basics of javascript object and how react works.
You can use any name as a prop. But if you choose prop={any object}. You have to use it inside your app observer as:
const App = observer(props => (
<div>
<button onClick={e => props.prop.addTodo(randomId(), "New Task")}>
Add Task
</button>
{values(props.prop.todos).map(todo => (
The value that are passed inside the curly braces can be anything too, in this case they are defining store as
const store = RootStore.create({
users: {},
todos: {
"1": {
id: id,
name: "Eat a cake",
done: true
}
}
});
if you use
<App store={store} />
the props object inside the observer will be
{
store: {
users: {},
todos: {
"1": {
id: id,
name: "Eat a cake",
done: true
}
}
}
}
now if you use
<App prop={store} />
the props object inside the observer will be
{
prop: {
users: {},
todos: {
"1": {
id: id,
name: "Eat a cake",
done: true
}
}
}
}
as you can see you dont have the property store anymore, so if you keep the props.store.todos, the property store is undefined.
Cheers.