Using State in React Components

May 15, 2020 ยท 2 min read

In class components, you can have an internal state to access data only important to this component.

I created a state object that has a list and checkingOut property for a ShoppingCart class.

state = {
    list: ['bread', 'apples', 'tea'],
    checkingOut: false
}

State data is accessed in the component using this.state.<data>.

render() {
    return (
      <div>
        List:
        <ul>
          {
            this.state.list.map(item => {
              return <li key={item}>{item}</li>;
            })
          }
        </ul>
        <p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
        <button onClick={this.onCheckout}>Check out</button>
      </div >
    )
}

State data can also be modified using this.setState().

In the example below, checkingOut is set to true when the button is clicked.

this.setState() does not overwrite the other data (like list) even though it's not included in the update to the state object.

state = {
    list: ['bread', 'apples', 'tea'],
    checkingOut: false
  }

onCheckout = () => {
    this.setState({checkingOut: true});
}

render() {
    return (
      <div>
        List:
        <ul>
          {
            this.state.list.map(item => {
              return <li key={item}>{item}</li>;
            })
          }
        </ul>
        <p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
        <button onClick={this.onCheckout}>Check out</button>
      </div >
    )
}

If you need to know the data's current state in order to modify it, an argument that represents the current state can be passed (which is called prevState in the code below).

So checkingOut will be set to the opposite boolean value of its current value.

this.setState((prevState) => {
    return {
        checkingOut: !prevState.checkingOut
    }
});

Example with everything discussed:

import React, { Component } from 'react';

class ShoppingCart extends Component {

  state = {
    list: ['bread', 'apples', 'tea'],
    checkingOut: false
  }

  onCheckout = () => {
    this.setState((prevState) => {
      return {
          checkingOut: !prevState.checkingOut
      }
  });
  }

  render() {
    return (
      <div>
        List:
        <ul>
          {
            this.state.list.map(item => {
              return <li key={item}>{item}</li>;
            })
          }
        </ul>
        <p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
        <button onClick={this.onCheckout}>Check out</button>
      </div >
    )
  }
};

export default ShoppingCart;

Coming from a Vue.js background, I found a component's internal state to be similar to the data() returned in a Vue component where it is managed and modified directly from the component.

Found a typo or problem? Edit this page.