Very simple state change of specific array item in React

Question

I'm trying to change the state of only one specific array item from the reviews array. How can this be done? This code doesn't seem to work:

this.setState({
  reviews[2].current: true
});

Here's the full code:

import React, { Component } from "react";
import { render } from "react-dom";

const reviewsInit = [
  {
    name: "Peter Lahm",
    current: null
  },
  {
    name: "Simon Arnold",
    current: null
  },
  {
    name: "Claire Pullen",
    current: null
  }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      reviews: reviewsInit
    };
  }

  change = () => {
    this.setState({
      reviews[2].current: true
    });
  };

  render() {
    return (
      <div>
        {console.log(this.state.reviews[2].current)}
        <button onClick={this.change}>click me</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Demo: https://stackblitz.com/edit/react-tbryf5

As you can probably tell I'm new to react! Thanks for any help here

Sandy · Accepted Answer · 2020-04-19 09:20:46Z

2

For some context, React detects state change when reference of the state object changes. It does not track deep changes happening in array or the object.

Solution

We need to make another variable with same data (mostly destructuring). Change the value needed. And assign that to state again.

For Object

this.setState({...oldState, keyToChange: 'newValue'});

For Array

const temp = [...oldState];
temp[index] = 'newValue';
this.setState(temp);

Hope it helps.

answered Apr 19, 2020 at 9:20

Sandy

11.7k27 gold badges84 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keikai · Accepted Answer · 2020-04-19 09:15:47Z

1

It's common for an Array state to copy first then update one of its value

  change = () => {
    const result = [...this.state.reviews];
    result[2].current = true;
    this.setState({reviews: result});
  };

answered Apr 19, 2020 at 9:15

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Comments

cr kushal · Accepted Answer · 2020-04-19 09:30:30Z

import React, { Component } from "react";
import { render } from "react-dom";

const reviewsInit = [
{
    name: "Peter Lahm",
    current: null,
},
{
    name: "Simon Arnold",
    current: null,
},
{
    name: "Claire Pullen",
    current: null,
},
];

class App extends Component {
constructor() {
    super();
    this.state = {
        name: "React",
        reviews: reviewsInit,
    };
}

change = () => {
    const prevState = [...this.state.reviews];
    prevState[2].current = true;
    this.setState({
        reviews: prevState,
    });
};

render() {
    return (
        <div>
            {console.log(this.state.reviews[2].current)}
            <button onClick={this.change}>click me</button>
        </div>
    );
}
}

render(<App />, document.getElementById("root"));

Collectives™ on Stack Overflow

Very simple state change of specific array item in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related