What is state in React?

Question

I know that state allows us to create components that are dynamic and interactive but I want to deep in state.

Can someone help me to understand state in React using a real life example?

Answer 1

import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <h1>Hello world</h1>
        <h2>Count: {this.state.count}</h2>
        <button
          onClick={() => this.setState(state => ({ count: state.count + 1 }))}
        >
          +
        </button>
        <button
          onClick={() => this.setState(state => ({ count: state.count - 1 }))}
        >
          -
        </button>
      </div>
    );
  }
}

export default App;

In the above code, it has a state object with property/state: count.

State can simply be understand as a value at that point of time of the particular component/app. In the above example, when the app is first running, the app is with state count === 0

As we can see there are two buttons + and - that update the value using this.setState, it simply update the "state" of count for the app, and the app will re-render, whenever the state change

Answer 2

For example:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    show: false,
  }

  showTextToggle = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return (
      <div>
        <h3>Some title</h3>
        {show ? <div>Description</div> : undefined}
        <button onClick={this.showTextToggle}>Read more</button>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

P.S. CodeSandBox

Answer 3

State in real life example:

Before someone upvoted your question, you can imagine your question or think it as question component had vote state = 0 and after that it became 1 and so on. So interactivity with the application changed something in the application. That changed something/ value can be called state.

State in application/ component can change due to interactivity(event) or during time.

As time you can imagine this Post or Post Component before 30 minutes/ some time ago had no answer i.e answer state = 0. And now it has some (3) answers. So answer state = 0 changed to answer state = 3.

State is just a value that a component/app is in at particular time.

Just imagine the specific point of time when you posted this question and now see the changes in this post. This changes can be thought as change in the state of the component/ app.

Answer 4

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behaviour of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. For example, let us think of the clock that we created in this article, we were calling the render() method every second explicitly, but React provides a better way to achieve the same result and that is by using State, storing the value of time as a member of the component’s state. We will look into this more elaborately later in the article.

Answer 5

State allows you to create components that are dynamic and interactive.

It holds information about the current state of the app. You can keep your variables and your data inside the local state of the React app by doing,

class App extends Component{
    state = {
        didUserLogin: false
    }
}

Then, you can directly access the state using,

    console.log(this.state.didUserLogin);

or update it with,

    this.setState({didUserLogin: true});

As you keep manipulating the data inside the state, the components that use the state will be updated with the information you provided for the state.

More information,

• https://thinkster.io/tutorials/understanding-react-state
• https://reactjs.org/docs/state-and-lifecycle.html

Answer 6

class App extends Component {
    constructor(props){
        super(props);
        this.state = {products: []};
    }

    render() {
        console.log(this.state);
        return (
            <div className="container">
            </div>
        );
    }
}

In the latest react, we now can define state as a plain JavaScript object and the render method gets it correctly. Here is an example of state as a plain object outside constructor:

In the latest react, we now can define state as a plain JavaScript object and the render method gets it correctly. Here is an example of state as a plain object outside constructor:

class App extends Component {
    constructor(props){
        super(props);
    }
    state = {products: []}
    
    render() {
        console.log(this.state);
        return (
            <div className="container">
            </div>
        );
    }
}

More Details https://www.codegreet.com/how-to-use-state-in-reactjs/