javascript - Cómo crear claves únicas para componentes de React

Entonces, tengo este componente aquí, que si no le doy claves únicas, React lo renderiza incorrectamente. No puedo dar esto: key={$ {name}$ {index}} como clave porque el nombre de cada elemento puede ser editado, así que esto causará un re-montaje... Entonces, ¿cómo hago estas claves únicas? solo dar el índice no funciona...

{stringArray.map((name, index) => (
        <Component
          key={`${index}_${name}}`}
          name={name}
          index={index}
          onChange={onNameChange}
          onDelete={onNameDelete}
        />
      ))}

Respuesta #1

Una cosa que te recomendaría hacer sería instalar el paquete npm uuid aquí

No estoy seguro si estás usando commonjs o módulos, así que prueba con ambos al comienzo de tu archivo después de instalar el paquete npm uuid

// modules
import { v4 as uuidv4 } from 'uuid';

// commonjs
const { v4: uuidv4 } = require('uuid');

Entonces deberías poder hacer esto en su lugar

// Notice key is now the value of uuidv4()
{stringArray.map((name, index) => (
        <Component
          key={uuidv4()}
          name={name}
          index={index}
          onChange={onNameChange}
          onDelete={onNameDelete}
        />
      ))}

UUID es un identificador único universal. Más información