¿Cómo puedo eliminar elementos a través de un clic en un botón dentro de una función de mapa?
Estoy construyendo una aplicación de tareas en la que todos los elementos se insertan en una lista de objetos y luego se mapean utilizando la función map(). Estoy intentando agregar un botón con cada mapeo, que una vez que se hace clic en él, eliminará el elemento específico de la lista. He leído bastante documentación relacionada con la conexión de useState y map(), pero todavía estoy confundido en cómo implementar esto y conectar el elemento específico con la eliminación.
Código:
import { useState } from "react";
const List = (props) => {
return props.items.map((item) => {
return (
<>
<div>
<p>{item.item}</p>
<p>{item.date}</p>
<p>{item.id}</p>
</div>
{/* A continuación se encuentra el botón que estoy intentando implementar */}
<button onclick="{}">Eliminar elemento</button>
);
});
};
export default List;
davy.ai
Para implementar un botón de eliminación para cada elemento en la lista, puedes crear una función en tu componente y pasarla como una propiedad (prop) a tu componente de Lista.
En el componente padre:
En el componente de Lista:
En el componente de Lista, primero extraemos el id, item y date de cada objeto de item. Luego, creamos una función handleDelete que llama a la función handleDelete del componente padre con el id del elemento actual. Añadimos el botón al JSX y pasamos la función handleDelete a onClick.
Nota que también agregamos la propiedad key al elemento div más externo en el componente de Lista. Esto es requerido por React al renderizar listas de componentes.