react setState array of object using map doesn't work?

Question

I have problem doing a setState changing value of a nested array of object. Below code suppose to change question of id 2 to answer: true but it did not, what's wrong?

this.state = {
  questions: [
    {
      id: 1,
      answer: ''
    },
    {
      id: 2,
      answer: ''
    },
  ]
}
//I have a click event somewhere
this.setState(
  {
    questions: this.state.questions.map(q => {
      if (q.id === 2) {
        return {
          ...q,
          answer: true
        }
      } else {
        return { ...q }
      }
    })
  },
  console.log(this.state.questions[1]) // did not see id of 2 being changed to true?
)

@Finesse it's the state, updated

Alisa T Morgan
– Alisa T Morgan

2018-09-21 00:53:28 +00:00
Commented Sep 21, 2018 at 0:53 — Alisa T Morgan
– Alisa T Morgan, Commented Sep 21, 2018 at 0:53
Actually, OP updates the state correctly.

devserkan
– devserkan

2018-09-21 01:01:15 +00:00
Commented Sep 21, 2018 at 1:01 — devserkan
– devserkan, Commented Sep 21, 2018 at 1:01

Finesse · Accepted Answer · 2018-09-21 02:19:55Z

4

The console.log(this.state.questions[1]) line is executed before the this.setState line is executed, that's why the old state is printed to the console. You should put the line inside a function to delay the execution:

this.setState(..., () => console.log(this.state.questions[1]));

Also it is recommended to use a function as the first argument if the changed state is derived from the current state because React doesn't apply the new state immediately therefore this.state can be outdated when React applies the new state:

this.setState(state => ({
  questions: state.questions.map(q => {
    if (q.id === 2) {
      return {...q, answer: true};
    }
    return q;
  })
}), () => {
  console.log(this.state.questions[1]);
});

edited Sep 21, 2018 at 2:19

answered Sep 21, 2018 at 1:02

Finesse

11k8 gold badges72 silver badges98 bronze badges

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

1 Comment

devserkan Over a year ago

Err, probably a missing part here :) questions.map should be state.questions.map. Right? :)

devserkan · Accepted Answer · 2018-09-21 01:00:38Z

You are not invoking your setState callback. Try like this:

this.setState(
  {
    questions: this.state.questions.map(q => {
      if (q.id === 2) {
        return {
          ...q,
          answer: true
        };
      }
      return { ...q };
    })
  },
  () => console.log(this.state.questions[1]) // did not see id of 2 being changed to true?
);

Though, since you are using the current state to update your state again, it would be better to use functional setState.

this.setState(
  currentState => ({
    questions: currentState.questions.map(q => {
      if (q.id === 2) {
        return {
          ...q,
          answer: true
        };
      }
      return { ...q };
    })
  }),
  () => console.log(this.state.questions[1])
);

Also, you don't have to log your state in a callback to setState. You can log your state in your render method without struggling setState's callback.

this.setState(
  currentState => ({
    questions: currentState.questions.map(q => {
      if (q.id === 2) {
        return {
          ...q,
          answer: true
        };
      }
      return { ...q };
    })
  })
);

....

render() {
    console.log( this.state );
    ....
}

Finesse · Accepted Answer · 2019-06-26 06:30:08Z

-1

I think it's because Array.map returns an array. Try:

this.setState(
  {
    questions: this.state.questions.map(q => {
      if (q.id === 2) {
        q.answer = true;
      } 
      return q;
    })
  },
  console.log(this.state.questions[1]) // did not see id of 2 being changed to true?
)

edited Jun 26, 2019 at 6:30

Finesse

11k8 gold badges72 silver badges98 bronze badges

answered Sep 21, 2018 at 1:01

Charlie

1832 silver badges14 bronze badges

3 Comments

devserkan Over a year ago

Hi @Charlie. As a crucial suggestion, do not mutate your state, your object properties like that using React, Redux, etc. Never. OP is doing right.

Charlie Over a year ago

yeah you're right: immutability in objects, that's Redux's principle

devserkan Over a year ago

Also, in React's state :) Good luck on your developing journey.

Collectives™ on Stack Overflow

react setState array of object using map doesn't work?

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related