React : Add an object into an array

Question

I'm a beginner with React, and I would like to add an object into an array.

Here is my code :

const initialState =
{
  messages: [],
};



export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_MESSAGE':
      return {
    messages: update(state.messages, {$push: [{text: action.text}]})
  };

  default:
  return state
  }
}

And in my component:

<ul>{this.props.chat.messages.map((message) =>{ return <li>{message.text}</Link></li> })

}

And I get the error:

Encountered two children with the same key,[object Object]. Child keys must be unique; when two children share a key, only the first child will be used.

Thank you for your help.

Ming Soon · Accepted Answer · 2017-02-18 12:18:50Z

4

You have to provide unique keys for each list item. Your messages don't have a key/ID and you need to provide a uniquely generated ID or as a last resort, use the index (which should be avoided as long as possible). The code above can be refactored as:

{ this.props.chat.messages.map((message, index) => (<li key={index}>{message.text}</li>) }

answered Feb 18, 2017 at 12:18

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

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

Comments

Rafael Pizao · Accepted Answer · 2019-01-15 02:45:56Z

0

By definition, Arrays are immutable data.

Following in the best practices, preferred use the $splice method.

answered Jan 15, 2019 at 2:45

Rafael Pizao

88111 silver badges24 bronze badges

Collectives™ on Stack Overflow

React : Add an object into an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related