Copy object from one array of objects to another in React

Question

I have this.props.person like this:

person = [{id: 1, name: John, age: 20},
          {id: 2, name: Kate, age: 30},
          {id: 3, name: Mike, age: 25}]

And I have empty this.state.newPerson: [].

Function get id value, searching object with this id in this.props.person, and add to this.state.newPerson this object. It can be repeats a few times.

For example: I call funcion addPerson twice with id=1 and id=3. In result I should get

this.state.newPerson: [{id: 1, name: John, age: 20}, {id: 3, name: Mike, age: 25}].

I tried:

addPerson(idPerson) {    
    const list = this.state.newPerson;
    const personToList = this.props.person.find(el => el.id === idPerson);
    const newP = Object.assign(list, { personToList });    
    this.setState({ newPerson: newP });
  }

In fact, I got something like [personToList {id: ...}]

How can I fix it?

Answer 1

You want to add personToList to the list array instead of assigning the entire array with the object { personToList: personToList } .

You could use the spread syntax instead.

Example

 class App extends React.Component { state = { newPerson: [] }; addPerson = personId => { const list = this.state.newPerson; if (list.some(el => el.id === personId)) { return; } const personToList = this.props.person.find(el => el.id === personId); const newP = [...list, personToList]; this.setState({ newPerson: newP }); }; render() { return ( <div style={{ display: "flex" }}> <div> {this.props.person.map(p => ( <div id={p.id} onClick={() => this.addPerson(p.id)}> {p.name} </div> ))} </div> <div> {this.state.newPerson.map(p => ( <div id={p.id} onClick={() => this.addPerson(p.id)}> {p.name} </div> ))} </div> </div> ); } } ReactDOM.render( <App person={[ { id: 1, name: "John", age: 20 }, { id: 2, name: "Kate", age: 30 }, { id: 3, name: "Mike", age: 25 } ]} />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

Answer 2

Object.assign is not right for this use case scenario. You're trying to add to an array on the state.

Try this instead:

addPerson(idPerson) { 
  let list = [...this.state.newPerson];
  let personToList = this.props.person.find(el => el.id === idPerson);
  list.push(personToList);
  this.setState({
    newPerson: list
  });
}

Answer 3

find returns only the first matching item. Use filter to get all of them.

Check the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 4

why do you use Object.assign if this.state.newPerson is an array? Just use list.push(personToList) but set your state like this this.state.newPerson = [];

Answer 5

Object.assign is used to combine two javascript object.personToList is already an object.

const newP = Object.assign(list, personToList);

Actually,you could use push to fix it.

const newP = list.push(newP)

Answer 6

try this:

addPerson(idPerson) { 
    this.setState({
      newPerson : this.state.newPerson.concat(this.props.person.find( i => i.id === idPerson))
    })
  }
}

or

 addPerson(idPerson) { 
    this.setState({
      newPerson : [this.state.newPerson, this.props.person.find( i => i.id === idPerson)]
    })
  }