What are State and uses of state in react

In the previous article on ReactJS | Props, we got to know that React props can be broadly classified into Functional and Class Components. Also seen that Functional Components are faster and much simpler than Class Components. The primary difference between the two is the availability of the State.

State

The state is an instance of React Component, Class can be defined as an object of a set of observable properties that control the behavior of the component.

In React, state refers to an object that stores data that is relevant to a component. This data can be anything, from a single value to a complex object. The state of a component can be updated using the setState() method, which is a built-in method of React.

The main reason for using state in React is to enable the creation of dynamic and interactive user interfaces. By storing data in a component’s state, the component can update its view in response to user interactions or changes in the application’s data.

The state object is where you can store property values that belongs to the component.When the state object changes the component re-renders.

Life cycle of state

Creating the state Object Using Class Component

The state object is initialized in the constructor:

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {author: "Tom"};
  }
  render() {
    return (
      <div>
        <h1>My Book</h1>
      </div>
    );
  }
}

The state object can contain many properties like:

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: "Dr Agrawal",
      title: "Mathematics",
      price: "$10",
      publish: 2018
    };
  }
  render() {
    return (
      <div>
        <h1>My Book</h1>
      </div>
    );
  }
}

Use the state Object

Refer to the state object anywhere in the component by using the this.state.propertyname syntax:

Refer the state object into the render() method.

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: "Dr Agrawal",
      title: "Mathematics",
      price: "$10",
      publish: 2018
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.title}</h1>
        <p>
          written by {this.state.title} book and price is
          {this.state.price}
          publish in {this.state.publish}.
        </p>
      </div>
    );
  }
}

Changing the state Object

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

onClick event that will change the price property:

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: "Dr Agrawal",
      title: "Mathematics",
      price: "$10",
      publish: 2018
    };
  }
  changePrice = () => {
    this.setState({price: "$15"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.title}</h1>
        <p>
          written by {this.state.author} and price is
          {this.state.price}
          publish in {this.state.publish}.
        </p>
        <button
          type="button"
          onClick={this.changeprice}
        >Change price</button>
      </div>
    );
  }
}

Always use the setState() method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods).

For more details, you can follow the document. See the blog click here