update nested value of state using dynamic key

Question

I wants to change grade object of state using dynamic key. Below is my code

state = {
            id1: {
                name: 'XYZ',
                grade: {
                    science: 'A',
                    maths: 'C',
                },
            },
            id2: {
                name: 'ABC',
                grade: {
                    science: 'A+',
                    maths: 'A+',
                },
            },
}

I tried couple of things but couldn't found successful result.

updateGrade(gradeObj, dyamicKey) { // dyamicKey will be id1, id2
    this.setState({
        [dyamicKey]: {
            ... dyamicKey.grade,
            grade: gradeObj,
        },
    });
}

updateGrade(gradeObj, dyamicKey) { // dyamicKey will be id1, id2
    this.setState({
        [dyamicKey[grade]]: gradeObj,
    });
}

Roy Wang · Accepted Answer · 2018-05-07 13:39:41Z

4

this.setState(prevState => ({
  [dyamicKey]: {
    ...prevState[dyamicKey],
    grade: gradeObj,
  },
}));

answered May 7, 2018 at 13:39

Roy Wang

11.3k2 gold badges27 silver badges44 bronze badges

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

Comments

Ezequiel Caballero · Accepted Answer · 2019-05-30 04:31:46Z

FYI: this topic was extensively cover here, and even is recommended not to use nested states, according to this answer.

As an extra comment to the first answer and for the ones to come, if you have two or more nested values in your state and you want to update a single nested value, you could do the following:

this.setState(prevState => ({
  [dynamicKey]: {
  ...prevState[dynamicKey],
  grade: { 
    ...prevState[dynamicKey].grade,
    science: "Z"
  },
}));

Or, if the dynamic key is related to a specific attribute:

this.setState(prevState => ({
  id1: {
  ...prevState.id1,
  grade: { 
    ...prevState.id1.grade,
    [dynamicKey]: "Z"
  },
}));

One or more dynamic keys can be used and the spread operator can be used for each nested level (although the code will start to look ugly/dirty with this approach).

Collectives™ on Stack Overflow

update nested value of state using dynamic key

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related