Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
components
state
dom

Using setState() method in React

Educative Answers Team

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;

RELATED TAGS

react
components
state
dom
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring