How add unique key in multidimensional array?

Question

I want an make an text animation that animate every single spell.

The animation data source is coming from an Array.

The animation is triggered based on key.(In React and also framer motion)

and we know otherwise if there isn't come the message >> Warning: Each child in a list should have a unique "key" prop.

If I try solve the unique key problem with index the error message is vasnished but the problem stayed >> not animating

So the advice other developers use unique key but not use index.

Okey I use unique key every single spell.

But the problem is there the "outer map function or div" i only use index.

My Animation accept this data form: Array in array so spell in word

so the problem this row

 <div key={index} > 

I think

But I open entire other solution.

What is the solution?

Thank you

My problem source post: StaggerChildren work only first render at text animation

import React from "react";
import "./AnimatedText.css";

export default function AnimatedText() {


  let animatedText = [
    [
      { name: "H", id: 1 },
      { name: "o", id: 2 },
      { name: "w", id: 3 },
    ],
    [
      { name: "s", id: 4 },
      { name: "o", id: 5 },
      { name: "l", id: 6 },
      { name: "v", id: 7 },
      { name: "e", id: 8 },
    ],
    [
      { name: "t", id: 9 },
      { name: "h", id: 10 },
      { name: "i", id: 11 },
      { name: "s", id: 12 },
      { name: "?", id: 13 },
    ],
  ];

  return (
    <div className="animated-text">
      <h1>Animated Text</h1>
     
      {animatedText.map((item,index) => (
        <div key={index} >
          {item.map((x) => (
            <p key={x.id}>{x.name}</p>
          ))}
        </div>
      ))}
    </div>
  );
}

Answer 1

The only way to give that outer .map loop unique keys is to make the elements be objects instead of arrays . Eg:

let animatedText = [
  {
    id: 1,
    elements: [
      { name: "H", id: 1 },
      { name: "o", id: 2 },
    ],
  },
  {
    id: 2,
    elements: [
      { name: "s", id: 1 },
      { name: "o", id: 2 },
    ],
  },
];

But also note that the framer-motion requirement is a different issue than the warning from react :

• The framer-motion elements require keys in order to work at all.
• React warns you that you might run into performance or consistency issues if you don't use unique keys.

It might be appropriate to just use the index for react components, if you are sure the order of the elements is always the same, as react says :

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort