Using setState() method in React

React is built on the foundation of truly reusable and encapsulated components, that are also meant to be self-managing. This means that the data update mechanism should be an internal detail of every component.

Have a look at the given React app:

The greetings function:
- Line 5: Takes in an object target.
- Line 6: Extracts value from it.
- Line 12, 16-19: Renders a greeting message.
On each change in the input element, the greeting method is called again to render an updated greeting (Line 10).

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';

function greetings({ target }) {
  var value = target? target.value : "";
  const element = (
    <div className="text-center my-2">
      <label> Full Name: </label>
      <input type="text" name="fullname" onChange={greetings} />
      <div className="border border-primary py-3">
          <h4> Greetings, {value}!</h4>
      </div>
    </div>
  );
  ReactDOM.render(
      element,
      document.getElementById('root')
  );
}

greetings({});

This works perfectly fine. But what if another component needs to read the current value of the greeting component? That is achievable if we declare greeting to be a class, rather than a function, so that its objects may also store variables accessible across components.

Adding `state` to components

Have a look at the updated React app given below:

Line 4: Convert the greeting method to a class.
Line 5-7: Maintain a local state with useful variables.
Line 11-13: Every time the stateChange method is invoked, it extracts value from the passed target argument, and uses the setState() method to update the local values.

Warnings:
1. You should never update the state directly (i.e. this.state.var = updatedVar).
2. React may batch run multiple setState() calls for performance. So you should never rely on the directly modified values to calculate the next state, without the use of a callback function.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

class Greeting extends Component {
  state = {
    fullname: '',
  }

  stateChange = (f) => {
    const {name, value} = f.target;
    this.setState({
      [name]: value,
    });
  }

  render() {
    return (
      <div className="text-center">
        <label htmlFor="fullname"> Full Name: </label>
        <input type="text" name="fullname" onChange={this.stateChange} />
        <div className="border border-primary py-3">
            <h4> Greetings, {this.state.fullname}!</h4>
        </div>
      </div>
    );
  }
}

export default Greeting;

Free Resources

Using setState() method in React

Adding state to components

Adding `state` to components