Add a Key to an Array.map

Question

I'm battling to understand how to resolve the warning:

key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

I have added 'i' in my map function, and passing it to my child as 'key'.

I'm not sure what it means by 'pass it as a different prop'. What am I doing wrong?

 {   
          this.state.accounts.map(function(account, i){
              return (
                  <AccountCard 
                         key={i}
                         lastTransactions = {account.lastTransactions} 
                         bank={account.bank} 
                         number={account.number} 
                         id={account.id} 
                   />         
             )
       })
    }

In the AccountCard component, I access the key/id like this:

 <div className=" col-lg-4 col-md-6 col-sm-12 col-xs-12" key={this.props.key}>

Answer 1

Don't access this.props.key . Key is for React itself. If you need value of key "pass it as a different prop" . For example:

<AccountCard 
  key={i}
  myKey={i}
  lastTransactions = {account.lastTransactions} 
  bank={account.bank} 
  number={account.number} 
  id={account.id} 
 />  

Key is for React, myKey is for you to access with this.props.myKey . See the docs for examples.

Answer 2

I think the problem is not in this snippet (altough the use of index as key is not recommended, use account.id as key), but in the AccountCard component declaration. I think there you're trying to do something like props.key .

If you really need that i in the child component, add another props just for that and use that in the child.

<AccountCard 
   key={account.id}
   i={i}
   lastTransactions = {account.lastTransactions} 
   bank={account.bank} 
   number={account.number} 
   id={account.id} 
/>     


<div className=" col-lg-4 col-md-6 col-sm-12 col-xs-12" key={this.props.i}>

Answer 3

While the other answers are correct, I'd like to add an alternative solution.

Instead of passing the key down via some arbitrary prop, you can provide a key directly by wraping a div around each AccountCard . Like so:

this.state.accounts.map(function(account, i){
  return (
    <div key={i}>
      <AccountCard 
        lastTransactions = {account.lastTransactions} 
        bank={account.bank} 
        number={account.number} 
        id={account.id} 
      />
    </div>
  )
})

---

OR , use fragments if you are using React v16.2 or later:

this.state.accounts.map(function(account, i){
  return (
    <React.Fragment key={i}>
      <AccountCard 
        lastTransactions = {account.lastTransactions} 
        bank={account.bank} 
        number={account.number} 
        id={account.id} 
      />
    </React.Fragment>
  )
})

Using fragments will not add any unnecessary elements to the DOM (like the div in the first example). You can also use the <> and </> shorthand syntax if you prefer.