es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo eliminar elementos a través de un clic en un botón dentro de una función de mapa?

¿Cómo puedo eliminar elementos a través de un clic en un botón dentro de una función de mapa?

29 Jul, 2023 Programación

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;
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    import { useState } from "react";
import Lista from './List';

const App = () => {
  const [items, setItems] = useState([
    { id: 1, item: "Comprar víveres", date: "2021-06-01" },
    { id: 2, item: "Hacer la colada", date: "2021-06-03" },
    { id: 3, item: "Limpiar la casa", date: "2021-06-05" },
  ]);

  const handleDelete = (id) => {
    const updatedItems = items.filter((item) => item.id !== id);
    setItems(updatedItems);
  };

  return (
    <div>
      <h1>Lista de tareas</h1>
      <lista items="{items}" handledelete="{handleDelete}"></lista>
    </div>
  );
};

export default App;

    En el componente de Lista:

    import React from "react";

const Lista = (props) => {
  return props.items.map((item) => {
    const { id, item: todoItem, date } = item;

    const handleDelete = () => {
      props.handleDelete(id);
    };

    return (
      <div key="{id}">
        {todoItem}
        {date}
        <button onclick="{handleDelete}">Eliminar elemento</button>
      </div>
    );
  });
};

export default 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.

Comments are closed.