Can this.setState change multiple properties at once?

Question

In the context of this exercise, can this.setState change multiple properties at once?

Answer

Yes, you can use this.setState to change single, multiple, or even all properties of state at a time. When setting state for multiple properties, only the properties passed in will be updated.

For example, the following shows how the properties key1 and key3 of a state could be updated.

/* Given this state */
this.state = {
  key1: value1,
  key2: value2,
  key3: value3
}

/* We could use code like the following to update specific properties */
this.setState({ key1: newValue1, key3: newValue3 });
10 Likes

Here’s my version with the addition of button text change:

import React from 'react';
import ReactDOM from 'react-dom';

const green = '#39D1B4';
const yellow = '#FFD712';


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: green,
      text: 'Change to yellow'
      };
    this.changeColor = this.changeColor.bind(this);
  }
  changeColor() {
    const newColor = this.state.color === green ? yellow : green;
    const newText = this.state.text === 'Change to green' ? 'Change to yellow' : 'Change to green';
    this.setState({
      color: newColor,
      text: newText
    });
  }
  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
        <button onClick={this.changeColor}>
          {this.state.text}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById('app'));
12 Likes

really confused by this lecture, is there any examples to show me how call this.state function work?