ReactJS unique key in map function problem

Question

I'm building a piano app on React . I've created a array for storing note like this :

const notes = ["C", "D", "E", "F", "G", "A", "B"];

then I've mapped it like this :

<ul>
    {notes.map((note) => {
      if (note === "C") {
        return (
          <>
            <li key={note}>{note}</li>
            <li key={`${note}#`}>{note}#</li>
          </>
        );
      }
      return (
        <li key={note}>{note}</li>
      );
    })}
  </ul>

But ReactJS always pop the warning about unique key in list items . I've belived the problem is this :

<li key={`${note.id}#`}>{note.note}#</li>

But I can't quite understand why ( tried to log the key part in the console and they all look unique to me ). Can anyone explain this for me ? Thank in advance .

I *completely* misread this, I have no idea what I was thinking. — Dave Newton, Jul 04 '21 at 12:21

score 4 · Accepted Answer · answered Jul 04 '21 at 03:48

You need to add key for parent tags. so it should look like this:

<ul>
{notes.map((note) => {
  if (note === "C") {
    return (
      <React.Fragment key={note} >
        <li>{note}</li>
        <li}>{note}#</li>
      </React.Fragment>
    );
  }
  return (
    <li key={note}>{note}</li>
  );
})}

ReactJS unique key in map function problem

1 Answers1