0

How can I remove the following warning form my component:?

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

import React from 'react';

function myComponent(...data) {
  return (
    <section className="my-component">
      <ol className="my-component__cards">
        {data[0].items.map((item) => (
          <a className="my-component__slide">
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}
      </ol>
    </section>
  );
}

export default myComponent;

Thanks

user1941537
  • 6,097
  • 14
  • 52
  • 99
  • Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) – Leo Aug 26 '21 at 11:52

6 Answers6

1

Keys help React identify which items have changed, are added, or are removed. Key should be given to the elements inside the array to give the elements a stable identity. Here is reference doc https://reactjs.org/docs/lists-and-keys.html

Be sure that key is unique. If item has id or something like that, you can use it as a key.

import React from 'react';

function myComponent(...data) {
  return (
    <section className="my-component">
      <ol className="my-component__cards">
        {data[0].items.map((item) => (
          <a key={item.id} className="my-component__slide">
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}
      </ol>
    </section>
  );
}

export default myComponent;

If there is no unique id the you can use index, too, but it's considered kind of anti-pattern.

import React from 'react';

function myComponent(...data) {
  return (
    <section className="my-component">
      <ol className="my-component__cards">
        {data[0].items.map((item, index) => (
          <a key={index} className="my-component__slide">
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}
      </ol>
    </section>
  );
}

export default myComponent;
Muhammad Ibrar
  • 99
  • 5
0

If we render component in loop react require unique key for each element, you can use index inside your map function to give key to tag. like replace this in your code

{data[0].items.map((item,index) => (
      <a key={index} className="my-component__slide">
        <li>
          <h3>{item?.title?.rendered}</h3>
          <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
        </li>
      </a>
    ))}
Afzal Ali
  • 880
  • 8
  • 25
0

React use key to identify components and to decide whether or not to update the component. In other words, it is related to the optimization of the rendering process.

{data[0].items.map((item, index) => (
          <a className="my-component__slide" key={item.id}>
            <li>
              <h3>{item?.title?.rendered}</h3>
              <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
            </li>
          </a>
        ))}

Be sure that key is unique. If item has id or something like that, you can use it as a key. If no, you can use index, too, but it's considered kind of anti-pattern.

Chuck
  • 776
  • 5
  • 18
  • Thanks. I have already tried that. But it seems that React needs the key on
      tag, which is outside of the map method.
     – user1941537 Aug 26 '21 at 11:59
  • No. You need `key` for the root tag inside the iteration. In fact, your component should be in this format. `
      sth.map(()=>
      • )
    `     – Chuck Aug 26 '21 at 12:02
  • Warning: Each child in a list should have a unique "key" prop. Check the top-level render call using
      .
     – user1941537 Aug 26 '21 at 12:08
0

Add Key attribute :

        return (
                <div>
                    {
                      lists.map(list =>(
                          <li key={list.id}>{list.value}</li>
                      ))  
                    }
                </div>
               )
Murali Kollati
  • 149
  • 6
0

Every 'list' tag requires a unique id when you use map method Go to Docs

You can simply pass the index as unique key to the 'list' tag this will solve your problem!!

<ol className="my-component__cards">
    {data[0].items.map((item,i) => (
      <a className="my-component__slide">
        <li id = {i}>
          <h3>{item?.title?.rendered}</h3>
          <p dangerouslySetInnerHTML={{ __html: item?.content?.rendered }} />
        </li>
      </a>
    ))}
  </ol>
NITISH KUMAR
  • 19
  • 3
0

the problem its not about the ol tag.

The Solution:

When creating a list in the UI from an array with JSX, you should add a key prop to each child and to any of its’ children.

Ex: Item1

React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.

It is not recommended to use the index of the array as the key prop if you know the array will not be static. If the key is an index, reordering an item in the array changes it. Then React will get confused and re-render the incorrect element.

Keys do not have to be unique globally. They just need to be unique across sibling elements.

<ul>
  {["Item1", "Item2", "Item3"].map((item, index) =>
    <li key={item}>{item}</li>
  )}
</ul>
Filipe Prado
  • 126
  • 4