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 AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

YouTubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources