ReactJS: using spread element to update state

Question

I am getting a syntax error and not sure I understand why:

Current state looks something like this:

people: [{
    id: 1,
    firstName: 'Eric',
    lastName: 'Andrews',
}, {
    id: 2,
    firstName: 'Rick',
    lastName: 'Handsome',
}, {
    id: 3,
    firstName: 'Yoni',
    lastName: 'Andrews',
}],

addNewFriend() {
    this.setState({
        people: {
            [...this.state.people, {
                id: this.state.idIncrementor + 1,
                firstName: this.state.newPerson['newFirstName'],
                lastName: this.state.newPerson['newLastName'],
            }]
        },
        newPerson: ''
    })
}


Syntax error: Unexpected token (156:26)

  154 |         this.setState(
  155 |             {
> 156 |                 people: {[...this.state.people, 
      |                           ^
  157 |                     {
  158 |                         id: this.state.idIncrementor +1, 
  159 |                         firstName: this.state.newPerson['newFirstName'],

I want to merge the this.state.people and a new dictionary. people is current a list of dictionaries and I want to add a new dictionary.

What am I doing wrong?

{[ ]} is just invalid JavaScript. You cannot put an object literal inside an object literal like that. It has nothing to do with spread elements. — Felix Kling
– Felix Kling, Commented Oct 13, 2017 at 17:11

Bsalex · Accepted Answer · 2017-10-13 16:44:39Z

4

You've missed that people is an array, not an object, so

people: {[...this.state.people,

should be

people: [...this.state.people,

edited Oct 13, 2017 at 16:44

answered Oct 13, 2017 at 16:41

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: using spread element to update state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related