How can I concatenate strings for a React key?

Question

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?
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'))

Rami Enbashi · Accepted Answer · 2016-11-04 15:01:26Z

9

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.

answered Nov 4, 2016 at 15:01

Rami Enbashi

3,5561 gold badge21 silver badges21 bronze badges

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

Comments

Rupesh Terase · Accepted Answer · 2022-06-18 18:38:28Z

1

Added some examples for better understanding

key={'company_'+index} // key={date +'-'+sport}

<TableCell key={'company_'+index} align="right">
     {row.company?.name}
</TableCell>


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

answered Jun 18, 2022 at 18:38

Rupesh Terase

4703 silver badges15 bronze badges

Comments

dogisdev · Accepted Answer · 2021-02-11 12:27:15Z

0

It's showing with commas because toString will use commas to join the array.

This is what you have:

arr = ['2016-10', '-', 'football']
console.log(arr.toString); // "2016-10,-,football"

This is what you want:

arr = ['2016-10', '-', 'football']
console.log(arr.join()); // "2016-10-football"

So consider replacing the li to (notice the .join()):

return (<li key={[date, '-', sport].join()} >{sport}</li>)

edit: use join("") for expected result, you should pass a separator (in this case an empty string) to arguments of the method. For example, ['2016-10', '-', 'football'].join('~separator~') would return "2016-10~separator~-~separator~football"

edited Feb 11, 2021 at 12:27

dogisdev

471 silver badge8 bronze badges

answered Nov 4, 2016 at 15:02

JorgeObregon

3,3701 gold badge14 silver badges12 bronze badges

Comments

Steve Stilson · Accepted Answer · 2022-07-25 20:23:24Z

0

I had no problem using a plus sign to concatenate two fields to make a unique key:

 {rows.map((Group) => (
      <li key={Group.user_id + Group.lgroup_id}>
      -- Display the parts of the Group object here.  --
      </li>
 ))}

answered Jul 25, 2022 at 20:23

Steve Stilson

1,0138 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I concatenate strings for a React key?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related