Steps to Manipulate the State in Class Components

Now first we will see how to create and manipulate state with class components.

1. Initializing state:

Syntax:

• Initializing state object inside constructor

  constructor() {
      super();  // Don’t Forget to pass props if received
      this.state = {
          // Any object
      };
  }
  
  

• Initializing state object using class property

  class MyComponent extends React.Component {
      state = {
          // any object
      };
  }

2. Accessing State:

We can access state object anywhere in component with “this.state”, the state is local so, don’t try to access it from an outside component, if you need it outside then somehow you can pass it as props.

3. Manipulating State:

Class component provides us a setState function we can call it anywhere in the component to manipulate state. 

• Changing state object with a provided object as an argument while calling setState.

  this.setState({
      // anyobject
  });

• When we have to update based on the previous state we pass a function that gets the previous state as a parameter.

  this.setState((prevState) => {
      // Do return a new state object 
      // after some manipulations 
  });

• setState actions are asynchronous, so when we have to do something (ex- fetching dynamic content, changing component internally, etc) strictly after the state has been updated we pass a callback function as a second argument to setState function.

Example: This example implements the state access and manipulation in React JS Class Components.

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Explanation: This is the output of the above code, just after clicking on the button, the event gets generated which calls this.setState function to manipulate state, and immediately after that, the callback function passed as a second argument to this.setState executes, and the line gets printed on the console.

Working with and Manipulating state in React JS makes the components re-render on the UI by Updating the DOM tree. It makes sure to render the latest information and data on the interface.