Question 247847 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why am I still getting a "Warning: Each child in a list should have a unique "key" prop."

I see the component in react dev tools and each of the Summaries has a unique key on it. But the warning won’t go away.

const summaryData = [
    {
      id: 1,
      box: "one",
      sprite: "html5",   
    },
    {
      id: 2,
      box: "two",
      sprite: "envelope",
    },
    {
      id: 3,
      box: "three",
      sprite: "wordpress",
    },
    {
      id: 4,
      box: "four",
      sprite: "tongue",
    },
  ];

{summaryData.map((summary) => (
            <Summaries
              key={`box${summary.id}`}
              box={summary.box}
              sprite={summary.sprite}
            />
          ))}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So I figured out that it really wasn't a key problem but a problem with how I did my data in my array. Thanks Konrad.

    The problem now is I need to pass html with props and render in Summaries.

    If I leave it as is then the html renders but I get the key warning. If I wrap the html inside quotes then it won't render correctly and I see code in Summaries.

    const summaryData = [
    {
      id: 1,
      box: "one",
      sprite: ["html5", <br class='hide' />],   
    },
    {
      id: 2,
      box: "two",
      sprite: "envelope",
    },
    {
      id: 3,
      box: "three",
      sprite: "wordpress",
    },
    {
      id: 4,
      box: "four",
      sprite: "tongue",
    },
  ];

  2. 0

    You could always create a composite key by concatenating multiple field values or hashing the object.

    const { StrictMode, useEffect, useState } = React;

const fetchSummaryData = () => Promise.resolve([
  { id: 1, box: "one", sprite: "html5" },
  { id: 2, box: "two", sprite: "envelope" },
  { id: 3, box: "three", sprite: "wordpress" },
  { id: 4, box: "four", sprite: "tongue" },
]);

const BoxSummary = ({ id, box, sprite }) => (<div>{sprite}</div>);

const App = () => {
  const [summaryData, setSummaryData] = useState([]);
  
  useEffect(() => {
    fetchSummaryData().then(setSummaryData);
  }, []);

  return (
    <div>
      {summaryData.map(({ id, box, sprite }, _index) => (
        <BoxSummary
          key={box + id /* supply a composite key */}
          id={id}
          box={box}
          sprite={sprite}
        />
      ))}
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render((
    <StrictMode>
      <App />
    </StrictMode>
  ));
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
  3. 0

    Try adding the unique key with the index value as below instead. I always find this approach easier to read and you are far less likely to run into any errors also.

    
    summaryData.map((summary, index) => (
        <Summaries
            key={index}
            box={summary.box}
            sprite={summary.sprite}
        />
    ))}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search