Every React component has something called state. You can think of this as the configuration of the component at a certain point of time.
Take, for example, a heart icon that turns red when you click on it, as in the case of Twitter. The button has two states: unclicked and clicked. Clicking on the button causes its state, and thus its appearance, to change.
That's the flow in React; user actions or events cause the component state to change, which causes the component's appearance to change.
The preceding statement comes with an enormous helping of "Well, not always…," but it's a useful starting point to understand state:
User event -> State change -> Appearance change
Let's add some state to our LoginContainer, and then go from there.
State is easy to define; it's an object that is the property of the class. We can define it as shown:
class LoginContainer extends Component {
state = { text: ‘Hello from state!’ }
render() {We always define state at the top of our component...