¿Podría alguien explicarme por qué ocurre este problema? Tengo una matriz de objetos que están mapeados y se desvanecen cuando se agregan a la matriz.
Si dentro del mapa, devuelvo el código jsx real para el objeto, luego, cuando el objeto se elimina de la matriz, anima las tarjetas restantes como debería.
{cards.map((c) => { return ( <motion.div key={key} variants={variant} layout} > ...ETC </motion.div> ); })}Sin embargo, si dentro del mapa uso un componente separado, no se anima y, en cambio, hace que todos los objetos después del objeto eliminado se desvanezcan en la opacidad nuevamente.
{cards.map((c) => { return <Card data={card} />; })} Puede ver una comparación aquí (haga clic para eliminar la tarjeta)
Mapa que devuelve el código JSX (funciona): https://codesandbox.io/s/crimson-http-qtpi0
Componente de retorno del mapa (no funciona): https://codesandbox.io/s/romantic-dewdney-dfqlp
No soy la persona más educada sobre React. ¿Alguien podría indicarme la dirección correcta para resolver este problema? Gracias.
Cuando devuelve una lista de elementos como ese, cada uno debe tener una clave única. De esa manera, cuando la lista cambia, React puede identificar qué elementos cambiaron. (Podría tener varios elementos con los mismos datos).
De hecho, si miras en la consola de tu segundo ejemplo hay un error que te dice precisamente eso:
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
Para solucionarlo, agregue una clave única a los elementos <Card> , como lo hizo en su primer ejemplo.
No estoy seguro de si se garantiza que sus valores npa o npx sean únicos. De lo contrario, puede agregar un campo de id a los datos.
{cards.map((c) => { return <Card data={card} key={c.id} />; })}