How to setstate array with dynamic keys in react js

Question

I have the following state value as an array. How can I push a new list var newList into Students array where the key Students is dynamically generated and sometimes it might be pushing to Teachers array.

The current list is available at

let key = "Students"
console.log(this.state.school[key])

My state is following and I need to push the new array of students or teachers based on the key.

this.state = {
    school: {
        Teachers: [
            {
                id: "1",
                name: "T1",
            },
            {
                id: "2",
                name: "T2",
            }
        ],
        Students: [
            {
                id: "1",
                name: "S1",
            },
            {
                id: "2",
                name: "S2",
            }
        ]
    }
}

Venkat · Accepted Answer · 2018-06-29 09:39:04Z

1

You have to update the state in immutable way,

let oldArray = this.state.school[key];
this.setState({
    school: {
        [key]: [
          ...oldArray,
          ...newList
        ]
    }
})

By this way, you can push your newList to either Students or Teachers based on key value.

edited Jun 29, 2018 at 9:39

answered Jun 22, 2018 at 6:01

Venkat

2652 silver badges18 bronze badges

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

2 Comments

Venkat Over a year ago

@HareeshSNair, Can you tell me in which line you get syntax error

Venkat Over a year ago

I have updated the answer, can you please check whether it is working

vijayst · Accepted Answer · 2018-06-22 05:47:32Z

0

State is immutable. You can use immutability-helper for ease of manipulation. But in plain JavaScript, the code is as follows:

let { school } = this.state;
school = Object.assign({}, school);
school.students = school.students.concat(newStudents);
this.setState({ school });

With immutability helper, the code will be a bit less.

let { school } = this.state;
school = update(school, {
  students: {
    $push: newStudents
  }
);
this.setState({ school });

answered Jun 22, 2018 at 5:47

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

Comments

yeshashah · Accepted Answer · 2018-06-23 04:58:02Z

0

Check out immutability helper. https://github.com/kolodny/immutability-helper/

import update from ‘immutability-helper’;
...
const newState = update( this.state, {
    school: {
        [key]: { $push: newList }
    } }

edited Jun 23, 2018 at 4:58

answered Jun 22, 2018 at 5:47

yeshashah

1,5541 gold badge11 silver badges20 bronze badges

2 Comments

yeshashah Over a year ago

You gotta import update from immutability helper lib. Check out the docs I have sent

yeshashah Over a year ago

@HareeshSNair I have updated my answer to include an import statement.

Collectives™ on Stack Overflow

How to setstate array with dynamic keys in react js

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related