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?

Sinane · Accepted Answer · 2018-10-28 12:04:47Z

1

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 = [];

answered Oct 28, 2018 at 12:04

Sinane

2,1102 gold badges15 silver badges19 bronze badges

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

Comments

Tholle · Accepted Answer · 2018-10-28 12:09:41Z

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>

user1871891 · Accepted Answer · 2018-10-28 12:13:59Z

1

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
  });
}

answered Oct 28, 2018 at 12:13

user1871891

3711 gold badge5 silver badges10 bronze badges

Comments

Root · Accepted Answer · 2018-10-28 12:28:09Z

0

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)

answered Oct 28, 2018 at 12:28

Root

2,3611 gold badge13 silver badges14 bronze badges

Comments

UjinT34 · Accepted Answer · 2018-10-28 12:03:01Z

0

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

answered Oct 28, 2018 at 12:03

UjinT34

4,9971 gold badge14 silver badges28 bronze badges

1 Comment

Andy Over a year ago

You should add actual code to your answer to be more useful.

YMG · Accepted Answer · 2021-01-18 23:12:30Z

0

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)]
    })
  }

answered Jan 18, 2021 at 23:12

YMG

5977 silver badges20 bronze badges

Collectives™ on Stack Overflow

Copy object from one array of objects to another in React

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related