user6213384 user6213384 - 1 month ago 6
React JSX Question

React: Composite key for a list of list

I am creating a list of list and want to put a unique key for each element. When I use the React Dev Tool, the new key is "2016-10,-,football".


  • Why does it have commas in it?

  • Is the key just only for React's use?

  • What is the correct way to specify a key when I want "2016-10-football"?



React Dev Tool Console

import React from 'react'
import ReactDOM from 'react-dom'

const dates = ['2016-10', '2016-11', '2016-12'];
const sports = ['football', 'baseball', 'basketball'];

const Dates = ( { dates, sports } ) => {
return (
<ul>
{ dates.map( date => {
return (
<div key={date.toString()} >
<li>{date}</li>
<Sports sports={sports} date={date}/>
</div>
)
})
}
</ul>
)
}

const Sports = ( { date, sports } ) => {
return(
<ul>
{ sports.map( sport => {
// Results in: key="2016-10,-,football"
// Expected: key="2016-10-football"
return (<li key={[date, '-', sport]} >{sport}</li>)
})}
</ul>
)
}

ReactDOM.render(<Dates dates={dates} sports={sports}/>, document.getElementById('main'))

Answer

key expects a string so when you pass an array you are calling the Array's .toString() function. You will see the same result if you do console.log([date, '-', sport].toString())

Replace [date, '-', sport] with date + '-' + sport to fix it.

Comments