react todos tutorial props vs state

Question

So I'm in the beginning stages of learning Meteor and React and I just completed the tutorial on making a Todos list.

In the implementation we have a checkbox at the top that allows us to toggle between completed tasks and all tasks. This is set as a state.

There are also check boxes next to each task that can display a task as complete or not complete.

My question is, both of these check-boxes change in real time, yet only the former is designated as a state variable? Why is the task checkbox a prop?

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

The global checkbox is just linked to the state of the App component.

It gets more complex with the local checkbox of each Task component. The problem is that theApp component needs a global knowledge of all Task objects, e.g. to hide completed tasks.

Task components could hold the checkbox state, but it is not the way React works. In React, a parent component usually does not read the state of its children, but instead holds the state itself and passes relevant information the its children so that they can render it.

When a child needs to update some state, it does at the global level (see toggleChecked and deleteThisTask in the tutorial), so that its parent gets notified and rerenders the child. See here for another example.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 13 '16 at 08:22

Valéry

4,574
1
14
25

Thanks for the reply, but I guess I'm more confused about why each Task's checked (finished or not) status is not a state. I think I get why the show completed is a state, but not why the checkbox next to each Task is just a prop, when it is dynamic. Looking at the code for both, both bind the this.state/props.task.property to a toggle event handler, which updates the variable to the server, except the showCompleted one uses a state while each task's checked uses a prop. Any clarification? – meteorite104 Jun 13 '16 at 15:07
The global state is temporary (will go away if you close the tab). The "local" states are stored in the database, so the components can only show them. You *could* store them in a local state, but it would be useless here, and you have to update the database anyway. – Valéry Jun 13 '16 at 15:28

score 0 · Answer 2 · answered Jun 15 '16 at 02:24

0

Good explanation here (full version)

answered Jun 15 '16 at 02:24

Sudheer Jami

697
6
15

react todos tutorial props vs state

2 Answers2