Soy muy nuevo en el desarrollo frontend y trato de construir un componente de tareas simples. Tengo un problema para restablecer la matriz. Siempre queda un elemento en DOM. Pero sólo el botón "DEL".
Todas las demás funciones/ganchos funcionan como se esperaba.
Este es el código:
import { useState } from 'preact/hooks'; const Todo = () => { const [input, setInput] = useState('') const [todos, setTodos] = useState([]) const onInput = ev => { setInput(ev.target.value) } const deleteItem = itm => { setTodos(todos.filter(el => el != itm)) } const deleteList = () => { setTodos([]) } const onSubmit = ev => { ev.preventDefault() // const out = todos.push(input) setTodos([...todos, input]) setInput('') } return ( <> <form onSubmit={onSubmit}> <input type="text" onInput={onInput} value={input} placeholder="Todo..." autoFocus="autofocus" /> <button type="submit">Eingabe</button> <button onClick={deleteList}>CLEAR</button> </form> <ul> { todos.map(el => { return ( <li> {el} <button onClick={() => deleteItem(el)}>DEL</button> </li> ) }) } </ul> </> ) } export default TodoSu función de submit agregará input a su lista de tareas pendientes, incluso si la entrada es una cadena vacía. Es por eso que tiene un solo botón DEL en su lista. En su lugar, compruebe si la entrada está vacía y, si lo está, vuelva.
const onSubmit = ev => { ev.preventDefault(); if(input === '') { return; } // const out = todos.push(input) setTodos([...todos, input]) setInput('') }