Quiero filtrar cada tarea (elemento) pero mi código no funciona Mi propósito es cuando hago clic en cada div, el div desaparece pero no funciona
const { useState, Fragment } = React; const tasks = [ { id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto", }, { id: 2, title: "qui est esse", body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla", }, { id: 3, title: "ea molestias quasi exercitationem repellat qui ipsa sit aut", body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut", }, ]; /*export default*/ function Tasks() { const [initial_tasks, setTasks] = useState(tasks); const onDelete = (id) => { setTasks(initial_tasks.filter((task) => task.id !== id)); }; return ( <Fragment> {tasks.map((task) => ( <div style={{ border: "1px solid red" }} onClick={() => { onDelete(task.id); }} > <h1>{task.id}</h1> <p>{task.title}</p> </div> ))} </Fragment> ); } ReactDOM.createRoot(document.getElementById("root")) .render(<Tasks />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>Su variable de tareas no está adjunta a un estado. Su variable de tareas es lo que está usando para mapear en el renderizado. Entonces eso significa que los cambios entre renderizados pueden perderse. En su lugar, debe asignar su matriz a un estado.
const [taskList, setTaskList] = useState(tasks);Debe asegurarse de usar el captador de este estado para que sea el objetivo de su mapa. Entonces taskList es lo que necesita mapear.
También es importante recordar no mutar una matriz de estado directamente. Entonces, cuando desee agregar un nuevo elemento a la matriz. Tal vez sienta la tentación de escribir taskList.push(newTask)
Pero eso no está bien. Técnicamente funcionaría, pero no se marcaría como una actualización de estado y cualquier cosa suscrita a ese estado no se actualizaría con el nuevo valor hasta que se produzca una actualización de estado. Entonces, en su lugar, debe copiar el estado, empujar a esa matriz y luego volver a asignarlo. aquí hay un ejemplo
const addTask = (myTask) => { //make a copy of the state const state = [...taskList] //push new task state.push(myTask) //assign new state setTaskList(state) }En su ejemplo de filtrado, esto probablemente podría hacerse en un solo estado de conjunto de una línea
setTaskList(prvState => prvState.filter(task => task.id !== someValue));Esto funciona porque el filtro devuelve una nueva matriz, no una mutación de su matriz original.
aquí están los errores que cometiste
1: debe mencionar la variable de estado en el mapa para que cuando cambie se efectúe
2: no filtre intial_tasks, la función setTask le brinda el valor anterior, así que utilícelo
3: debe proporcionar un accesorio clave en el div para que react sepa qué elemento se ha cambiado
import { useState } from "react"; const tasks = [ { id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto", }, { id: 2, title: "qui est esse", body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla", }, { id: 3, title: "ea molestias quasi exercitationem repellat qui ipsa sit aut", body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut", }, ]; export default function App() { const [initial_tasks, setTasks] = useState(tasks); const onDelete = (id) => { setTasks(oldTasks => { return oldTasks.filter((task) => task.id !== id) }); }; return ( <> { initial_tasks.map((task) => ( <button key={task.id} style={{ border: "1px solid red" }} onClick={() => onDelete(task.id)} > <h1>{task.id}</h1> <p>{task.title}</p> </button> )) } </> ); }