REACTJS: understanding state

** Understanding React State**

Many web apps need their components to change their data, for example, after user interaction(clicking a button, submitting a form, etc.).
However, props cannot be changed.

In order to allow components to manage and change their data, React provides a feature called state.
state is an object that is added as a property in class components.

For example

`class Hello extends React.Component {
 state = {
    name: "James"
 }
 render() {
return <h1>Hello {this.state.name}.</h1>;
  }
}
`

As you can see, state is just a simple object, that contains key: value pairs.
Similar to props, the values can be accessed using this.state
Now, when the component renders, the state is initialized with the given value and there will be a heading that says "Hello James".

Changing State

The state should not be modified directly. instead, React provides a setState() method, that can be used to modify state.

Why should we use setState, instead of simply changing the value of the object properties directly?
The answer uncovers one of the most useful features of React: when setState is called, React automatically re-renders the effected component with the new state.

Usually, the change in the state happens in event handlers.

Counter App

To better understand how the state works, let's create a counter app, which increments the counter each time a button is clicked.
We start by creating our Counter component, which includes the counter and a button.

class Counter extends React.Component {
  state = {
    counter: 0
  }
  render() {
     return <div>
      <p>{this.state.counter}</p>
      <button>Increment</button>
      </div>;
    }
  }

We have initialized our Counter to the value 0 in the state.

Now, we need to add a click event handler to the button and increment the counter in the state.

class Counter extends React.Component {
  state = {
    counter: 0
  }
  increment = () => {
    this.setState({
       counter: this.state.counter+1});
   }
   render() {
      return <div> 
       <p>{this.state.counter}</p>
       <button onClick={this.increment}>Increment</button>
      </div>;
    }
}

The onClick event calls the increment function of our component, which uses setState to change the value of our counter. When the state is changed, React automatically triggers a re-render of the component.

Props vs State

As a recap, here is a summary of the main differences between props and state:

• We use props to pass data to components.

• Components use state to manage their data.

• Props are read-only and cannot be modified.

• State can be modified by its component using the setState() method.

• The setState() method results in re-rendering the component affected.

Comments

[Andrew Bone]

This is quite a dated way of writing react apps. Generally function based React has taken over and that requires the use of the useState hook.