CODEWITHSUNDEEP
reactjsjsx
alemayehu wondesen
alemayehu wondesen

Reputation: 113

React Error: Warning: Each child in a list should have a unique "key" prop

I am getting below error:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. 
See https://reactjs.org/link/warning-keys for more information.
WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:39295:25
App@http://localhost:3000/static/js/main.chunk.js:197:91

Here is my code:

function Table({ countries }) {
  return (
    <div className="table">
      {countries.map(({ country, cases }) => {
        <tr>
          <td>{country}</td>
          <td>
            <strong>{cases}</strong>
          </td>
        </tr>
      })}
    </div>
  )
}

Upvotes: 11

Views: 27806

Answers (5)

Yadab
Yadab

Reputation: 1883

First of all you are not returning element iterating the countries. React throws a warning if you do not provide key for each element you render within the loop as key is needed for react to identify which element has been changed. You can pass index to the key as the country or the cases can be same.

Table({ countries }) {
    return (
        <div className="table">
            {
            countries.map(({country, cases}, index) => {
                    return (
                      <tr key={index}>
                        <td>{country}</td>
                        <td>
                            <strong>{cases}</strong>
                        </td>
                      </tr>
                    )
                )
            }
        </div>
    );
}

Upvotes: 9

Aeuarthorn Wiboonkun
Aeuarthorn Wiboonkun

Reputation: 1

Table({ countries }) {
    return (
        <div className="table">
            {
            countries.map(({country, cases}, index) => {
                    return (
                      <tr key={index}>
                        <td>{country}</td>
                        <td>
                            <strong>{cases}</strong>
                        </td>
                      </tr>
                    )
                )
            }
        </div>
    );
}

Upvotes: 0

Ajeet Shah
Ajeet Shah

Reputation: 19863

The warning:

Warning: Each child in a list should have a unique "key" prop.

is telling you that you have not provided a unique key prop to the list you made using .map.

Key can be any locally unique value. Read more in the docs

Here are few examples:

// wrong
<div>
{
  [1,2,3,4,5].map(num => <p>{num}</p>)
}

// Correct. Good.
{
  [1,2,3,4,5].map(num => <p key={num}>{num}</p>)
}

// Correct. Not so good.
{
  [1,2,3,4,5].map((num, index) => <p key={index}>{num}</p>)
}

// Correct. Bad.
{
  [1,2,3,4,5].map((num) => <p key={Math.random()}>{num}</p>)
}

// Wrong
{
  [1,2,3,4,4,4].map((num) => <p key={num}>{num}</p>)
}

// Correct
{
  [1,2,3,4,4,4].map((num, index) => <p key={index}>{num}</p>)
}
</div>

So, to fix your code:

{countries.map(({ country, cases }) => {
  return <tr key={SOME_KEY_HERE}> { /* Maybe, key={country} or key={countryID} */ }
    <td>{country}</td>
    <td>
      <strong>{cases}</strong>
    </td>
  </tr>
})}

Upvotes: 1

arnu515
arnu515

Reputation: 192

React requires that you need to have a key prop that differentiates elements in a loop

function Table({ countries }) {
  return (
    <div className="table">
      {countries.map(({ country, cases }) => {
        <tr key={country}>
        <!-- or key={Date.now()}, if your countries are not unique -->
          <td>{country}</td>
          <td>
            <strong>{cases}</strong>
          </td>
        </tr>
      })}
    </div>
  )
}

Upvotes: 0

tadman
tadman

Reputation: 211740

React requires keys or any element rendered in this fashion. The key is just an arbitrary, yet unique property, so pick something that fits that, like:

countries.map(({country, cases}) => {
  <tr key={country}>
     <td>{country}</td>
     <td>
       <strong>{cases}</strong>
     </td>
  </tr>
})

So long as the country names are unique it'll be fine. You may want to use something like a short-form ISO country code to avoid the whole mess with accents and spelling.

Upvotes: 6

Related Questions