To react means to switch from one state to another. This means that you need to have a state in the first place and the ability to change that state. Have we mentioned a state or the ability to change that state in React elements? No. They are stateless. Their sole purpose is to construct and render virtual DOM elements. In fact, we want them to render in the exact same way, given that we provide them with exactly the same set of parameters. We want them to be consistent because it makes it easy for us to reason about them. This is one of the key benefits of using React—the ease of reasoning about how our web application works.
How can we add state to our stateless React elements? If we can't encapsulate state in React elements, then we should encapsulate React elements in something that already has state. Think of a simple state machine that represents a user interface. Every user action triggers a change of a state in that state machine. Every state is represented...