React State

The state is an updatable structure that is used to contain data(information) about the react UI component. The state in a react component can be changed over(on time) time. The change in state over(on time) time will happen as a response to user action or system event. A component with the state component is known as the stateful react component. It is the heart(state) of the React UI component which determines the behavior of the UI component and how it will render. They are also managed for making a UI component dynamic and interactive.

A state component must be kept as simple as possible. It can be used set by using the setState() method and calling the setState() method triggers UI components updated. A state represents the component’s local state or data(information). It can only be accessed or modified inside the react component or by the component directly. To set an initial state before any interaction happens, and we need to use the getInitialState() method.

For example, if we have five react components that need data(information) from the react state, then we need to create one container component that will keep the state for all of them.

Defining State:

To define a react state, you have to first declare a default set of values for defining the component’s initial state. To do this, add a react class constructor which assigns an initial state component using this.state. The ‘this.state’ property can be rendered inside the render() function method.

Example:

import React from "react";

export default class Button extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    console.log("in render", this.state.count);
    return (
      <div style={containerStyles}>
        <button onClick={this.handleClick} style={buttonStyles}>
          Increment
        </button>
        <span style={countStyles}>{this.state.count}</span>
      </div>
    );
  }

  handleClick() {
    this.setSomeState();

    console.log("handleClick", this.state.count);
  }

  setSomeState() {
    this.setState(
      prevState => {
        const { count: prevCount } = prevState;
        return {
          count: prevCount + 1
        };
      },
      () => {
        this.setSomeOtherState();
      }
    );
    console.log("setSomeState", this.state.count);
  }

  setSomeOtherState() {
    this.setState(prevState => {
      const { count: prevCount } = prevState;
      return {
        count: prevCount + 10
      };
    });
    console.log("setSomeOtherState", this.state.count);
  }
}

const containerStyles = {
  marginTop: "50px",
  display: "flex",
  justifyContent: "center",
  flexWrap: "wrap"
};

const buttonStyles = {
  flexBasis: "100%",
  backgroundColor: "#3f4eae",
  padding: "20px",
  color: "#ffffff",
  fontSize: "20px"
}

const countStyles = {
  marginTop: "20px",
  fontSize: "30px",
  color: "#eec200"
};

OUTPUT: