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.

¿Cómo puedo eliminar esto sin usar un ID único?

05 Aug, 2023 Programación

Quiero eliminar este TODO con o sin usar una clave única

Este es el código HOOK

const [todos, setTodos] = useState([{}])
const [user, setUser] = useState({
    id: uuidv4(),
    name: '',
    email: '',
    phone: '',
})

Esta es la función para establecer la entrada y eliminar un todo 

const addTodo = (e) => {
    e.preventDefault()
    setTodos([...todos, user])
    console.log(addTodo)
}
console.log(user)
const delTodo = (e, id) => {
    e.preventDefault()
    console.log(id)
    todos.splice(id, 1)
    setTodos([...todos])
}

Aquí estos están siendo mapeados 

{todos.map((todo) => (
                    <div>
                        <li key={todo.id}>
                            {todo.name}, {todo.email}, {todo.phone}
                        </li>
                        <button onClick={delTodo} color='danger'>
                            Delete
                        </button>
                    </div>
                ))}

Esto es lo que obtengo cuando hago console.log

enlace a la imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar un TODO con o sin una clave única, puedes modificar la función delTodo de la siguiente manera:

    const delTodo = (id) => {
    const newTodos = [...todos]; // creando una copia del arreglo
    newTodos.splice(id, 1); // eliminando el elemento del arreglo
    setTodos(newTodos); // actualizando el estado con el nuevo arreglo
};

    Luego, puedes pasar el id del TODO a la función delTodo al hacer clic en el botón Eliminar:

    <button onclick="{()" ==""> delTodo(todo.id)} color='danger'>
    Eliminar
</button>

    Esto eliminará el TODO con el id correspondiente del arreglo de estado todos, sin mutar el arreglo original.

Comments are closed.