Organized Chaos: React and the Montessori Classroom
The Parent holds data in state when there is a need to keep track of and remember information. A component cannot receive data from children or siblings, it is the parent that passes down the data as a prop, or property. The parent sends state to the child component inside of the function setState, which in turn in nested inside another function. The child then updates state in the parent by sending data to the function that holds setState. This was a difficult concept for me to grasp. Thinking back to My Montessori classroom was the best way for me to wrap my head around how data is passed around components.
Going back to the analogy of the classroom it works like this:
The teacher is state, tasked with holding all saved information — both the students themselves and all the work each is doing. At the beginning of the day the whole classroom is set to 0. All of the material is ready for the students to work with and learn from. The classroom is clean and organized. The students come in for the day and the teacher assigns them tasks. The students disperse with their own agendas and begin to work. As they work information comes back to the teacher. A student completing a lesson, a spill near the snack table, a missing piece from a lesson and so on. The children are not aware of what the other children are doing as they are busy with their own tasks, but the teacher is keeping track of them all. This may not be the very best analogy, but it helped me visualize how components pass information and how the parent component uses state, and setState to send and receive updated information.