React for Real

Define the Application State

React defines a series of constraints that help you keep the application structure predictable. You must store the state that affects the UI in a dedicated object that you access with this.state. Once you set the initial value, you update this.state with the this.setState function. setState can only update the state of the component where you call it. To update other components, pass the state or values you compute based on the state as props. Since you can only pass props to child components, updates only flow from components down to their children. This constraint makes the consequences of a state update more predictable, as you only need to look at the child components.

Let’s start with the structure of our state ...