Reading list Switch to dark mode

    What are State and uses of state in react

    Updated 5 April 2023

    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.

    Start your headless eCommerce
    now.
    Find out More

    Life cycle of state

    state-life-cycle

    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

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home