Así que estaba tratando de actualizar el valor que obtuve de Addlist e intenté esto, pero no funciona. Además, cuando hago clic en el botón '+' sin escribir nada, se crea una lista vacía. ¿Cómo debo detenerlo? He adjuntado un código a continuación.
import React from "react"; import "./App.css"; import { useState } from "react"; import TodoList from "./components/TodoList"; function App() { const [input, setInput] = useState(""); const [list, setList] = useState([]); const updateList = (e) => { setInput(e.target.value); }; const AddList = () => { console.log("value added") setList((addValue) => { return [...addValue, input]; }); setInput(""); }; const updateItems=(id)=>{ const newValue=[...list].map((newVal)=>{ if(input.id===id){ input.text=''; } return newVal; }) setList(newValue); } const deleteItems = (id) => { console.log("deleted"); setList((addValue) => { return addValue.filter((element, index) => { return index !== id; }); }); }; return ( <div className="todo-app"> <h1> Enter Anything</h1> <input type="text" placeholder="Add anything" value={input} onChange={updateList} /> <button onClick={AddList}>+</button> <ul> {list.map((itemsvalue, id) => { return ( <TodoList itemsValue={itemsvalue} key={id} onSelect={deleteItems} id={id} onUpdate={updateItems} /> ); })} </ul> </div> ); } export default App;Se agradece cualquier tipo de ayuda. Además, si quiero dividir esto en varios componentes, ¿hay alguna manera de hacerlo?
Cuando el usuario hace clic en el botón Agregar, se verifica el método String AddList vacío, por ejemplo: - El usuario actualiza el segundo valor de índice, el valor de la segunda posición se actualizará.
const [input, setInput] = useState(''); const [list, setList] = useState([]); const [index, setIndex] = useState(null); const updateList = (e) => { setInput(e.target.value); }; useEffect(() => { setList(list); console.log(list, '<>?'); }, [index]); const AddList = () => { if (input.trim() !== '') { setList([...list, input]); } setInput(''); }; const updateValue = (index) => { console.log(list[index]); setIndex(index); if (list[index].trim() !== '') { setInput(list[index]); } }; const UpdateList = () => { list[index] = input; console.log(list, 'before <>?'); setIndex(null); setInput(''); }; return ( <div> <input type="text" placeholder="Add anything" value={input} onChange={updateList} /> <button disabled={!index && !list.length === 0} onClick={AddList}> Add </button> <button disabled={input.trim() === ''} onClick={UpdateList}> Update </button> {list.map((m, index) => ( <h1 style={{ border: '1px solid black' }} onClick={() => updateValue(index)}> {m} </h1> ))} </div> );