Estoy tratando de crear una aplicación básica de tareas pendientes sin usar las aplicaciones de tareas pendientes de otras personas. Estoy tratando de aprender los conceptos básicos de ReactJS. En este momento, estoy luchando por eliminar una tarea porque quiero almacenar el botón dentro del componente Todo, que es un componente secundario del componente WorkSpace.
const WorkSpace = (props) => { const [todos, setTodos] = React.useState([]) function deletePara (index) { const newTodos = [... todos] newTodos.splice(index, 1) setTodos(newTodos) } return ( <Todo /> ) } const Todo = (props) => { // Generic Stuffs return ( // Generic Stuffs <DeleteIcon /> ) } const DeleteIcon = (props) => { return ( <IconButton> <DeleteForeverIcon /> <IconButton /> ) }El componente DeleteIcon utiliza los componentes IconButton y DeleteForeverIcon de MUI. No hay otra funcionalidad interna.
Si esta configuración general no funciona, ¿alguien tiene alguna idea alternativa?
Si desea eliminar un componente de tareas pendientes, debe crear una función de eliminación y pasarla a DeleteIcon como accesorios.
Como código a continuación, puse datos de tareas pendientes ficticias como estado inicial en useState y puede agregar más datos de tareas pendientes tantos como desee para probar este código.
Debe "filtrar" la función para eliminar todo porque usa el operador de extensión y la función de empalme, ya que no funciona tan bien en comparación con el uso del filtro.
Espero que encuentres solución!
const WorkSpace = (props) => { const [todos, setTodos] = React.useState([{id: 1, title: "example"}]) const handleDelete (id) { const newTodos = todos.filter(todo => todo.id !== id); setTodos(newTodos); } return ( <> {todos.map(todo => <Todo key={todo.id} todo={todo} handleDelete={handleDelete}>)} </> ) } const Todo = ({todo, handleDelete}) => { // Generic Stuffs return ( // Generic Stuffs <p>{todo.title}</p> <DeleteIcon id={todo.id} handleDelete={handleDelete}/> ) } const DeleteIcon = ({id, handleDelete}) => { return ( <IconButton onClick={handleDelete(id)}> <DeleteForeverIcon /> <IconButton /> ) }