Can this.setState change multiple properties at once?


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


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 });

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) {
    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';
      color: newColor,
      text: newText
  render() {
    return (
      <div style={{background: this.state.color}}>
          Change my color
        <button onClick={this.changeColor}>

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

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