CODEWITHSUNDEEP
reactjs
LuisPinto
LuisPinto

Reputation: 1687

Setting a key prop on a component

Hello I'm trying to set a key prop on a react component but I don't know why I get the following error

"Warning: Each child in an array or iterator should have a unique "key" prop"

This is the code where I set the key to the element

var lists = this.props.lists.map(listName => {
      return (
        <List key={listName.id} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/>
      )
    })

I really don't know what can be happening here, any idea?

Thank you in advance!

Upvotes: 0

Views: 590

Answers (2)

erichardson30
erichardson30

Reputation: 5044

listName and therefore doesn't have an id value that you're trying to set as a key. Since listName is also a string, there is no guarantee that it will be 100% unique. In order to fix this, do something like the following : 

var lists = this.props.lists.map((listName, index) => {
  return (
    <List key={index} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/>
  )
});

Upvotes: 0

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

listName is a string. It doesn't have id property. All listName.id results in same value undefined

If they are unique you can use listName as a key.

var lists = this.props.lists.map(listName => {
      return (
        <List key={listName} title={listName} cards={['Card1']} onAddClick={console.log('Clicked')}/>
      )
    })

Upvotes: 1

Related Questions