Using local state in a component

The local state is a fundamental feature of React for creating dynamic components. Local state is only available on class components, and each component manages its state. You can define the initial value of the state on the component's constructor, and when you update the value of the state, the component will be re-render itself.

Local state is helpful with toggles, for handling forms, and is used to manage information within the same component. It is not recommended to use local state if we need to share data between different components. In that scenario, we need to implement Redux state, which we will cover in Chapter5, Mastering Redux.

How to do it...

Let's define our initial state. Let's see how it works the component's render method when the local state is updated:

1. Using our Home component, we are going to add a constructor and define our initial state:

  import React, { Component } from 'react';
  import './Home.css';

  class Home extends Component ...