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>
  );
}

Maybe I'm missing something but I don't understand why you expect something to be animated here? — arfi720
– arfi720, Commented Mar 26, 2022 at 17:07
This is only a little part of the animation. I focus this post only the problem part of the code. From my animation there is another post. There you find a codesandbox that also is a simplified part of the code. The post name 'StaggerChildren work only first render at text animation'. But here is the code sandbox: codesandbox.io/s/wonderful-cloud-c8xhhd?file=/src/App.js — Milán Nikolics
– Milán Nikolics, Commented Mar 26, 2022 at 18:10

kca · Accepted Answer · 2022-03-27 08:55:34Z

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

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

Collectives™ on Stack Overflow

How add unique key in multidimensional array?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related