DUDA

Hola Leonardo,

Entiendo tu pregunta y es una muy buena. En React, cuando estás creando nuevos elementos (en este caso, colaboradores), necesitas asignarles un ID único. Esto se puede hacer de varias maneras, una de las más comunes es utilizando una librería como uuid que genera IDs únicos.

Por ejemplo, podrías hacer algo como esto:

import { v4 as uuidv4 } from 'uuid';

let nuevoColaborador = {
  id: uuidv4(), // Esto generará un ID único para cada nuevo colaborador
  // Aquí irían el resto de las propiedades del colaborador
}

Pero en versiones más recientes también es posible hacer esto de manera nativa, usando la API Crypto, del siguiente modo:

let nuevoColaborador = {
  id: Crypto.randomUUID(), // Esto generará un ID único para cada nuevo colaborador
  // Aquí irían el resto de las propiedades del colaborador
}

Otra forma también seria a la hora de renderizarlo con map podría pasar el index como id a cada Colaborador así como se hace con key.

En cuanto a tu problema con la eliminación de colaboradores, parece que estás llamando a la función eliminar directamente en el evento onClick, lo que causa que se ejecute inmediatamente cuando el componente se renderiza, en lugar de cuando se hace clic en el elemento.

Lo que necesitas hacer es pasar una función que llame a eliminar con el ID del colaborador cuando se haga clic en el elemento. Aquí te dejo un ejemplo de cómo podrías hacerlo:

<AiFillCloseCircle size={25} className="eliminar" onClick={() => eliminar(colaborador.id)} />

De esta manera, la función eliminar solo se ejecutará cuando se haga clic en el elemento, y no cuando el componente se renderiza.

¡Saludos!

Muchas gracias Bruno, la segunda parte si la tenia clara, mi duda era en la primera parte que me aclaraste y me sirvio para añadir nuevos colaborabores al formulario. A proposito para la utilizar la API Crypto debo instalar otra dependencia o como se utilizaria? Me quedo la duda si en lugar de let tambien se podria utilizar const en la primera parte que me aclaraste?

Hola Leonardo,

Que bueno te sirvió, me alegra. Para usar Crypto puedes hacer directamente pues es una api que ahora hace parte de NodeJS y como React lo usa, entonces está disponible nativamente, no hay que importar nada, pero creo que se escribe crypto con "c" minúscula y no mayúscula.

Y si puedes usar const en lugar de let, es recomendable si la variable no será alterada en el restante da la ejecución.

¡Saludos!