What is component state?
React components declare the structure of UI elements using JSX. However, components need data if they are to be useful. For example, your component JSX might declare a <ul> element that maps a JavaScript collection to <li> elements. Where does this collection come from?
State is the dynamic part of a React component. You can declare the initial state of a component, which changes over time.
Imagine that you're rendering a component where a piece of its state is initialized to an empty array. Later on, this array is populated with data using setState(). This is called a change in state, and whenever you tell a React component to change its state, the component will automatically re-render itself, calling render(). The process is visualized here:
Figure 3.1 – The component state lifecycle
The state of a component is something that either the component itself can set, or other pieces of code can set, outside...