Estoy creando una lista de tareas pendientes y quiero que cada elemento de la lista tenga un número, a partir de 1. Estoy usando el enlace useState en el mostrador, pero no sé cómo agregar nuevos elementos a la matriz cada vez que hago clic en un botón. No he codificado en meses y estoy realmente oxidado.
function Product() { const [input, setInput] = useState(""); const [todo, setTodo] = useState([]); const [count, setCount] = useState([]); const addTodo = e => { e.preventDefault(); setTodo([...todo, input]); setCount(prevCount => [...prevCount, prevCount + 1]); setInput(""); }; return ( <div> <form> <input value={input} onChange={e => setInput(e.target.value)} type='text' /> <button type='submit' onClick={addTodo}> Add! </button> </form> <h2 style={{ marginBottom: "0.5rem" }}>List of To-dos !</h2> {todo.map(todo => ( <p> {count.map(count => ( <p>{count}</p> ))} {todo} </p> ))} </div> ); }Quiero que cada vez que agregue un elemento de la lista, agregue su número a la izquierda. El primer elemento tendría 1, el segundo 2, etc.
No.
No hay razón para rastrear el recuento de elementos en una matriz como su propio valor de estado separado.
length que le indica el número de elementos en el arreglo..map() incluye un índice en la devolución de llamada, por lo que si solo desea generar el índice de matriz, puede hacerlo. Elimine el valor del estado de count por completo y solo emita el índice de la matriz de la lista de todo :
{todo.map((t, x) => ( <p> {x} {t} </p> ))} Tenga en cuenta también que todo su variable de tarea interna a solo t . Puede llamarlo como quiera, pero darle el mismo nombre que otra variable que ya tiene es solo generar confusión y errores.
En su lugar, es posible que desee cambiar el nombre de su matriz a algo en plural, como todos . Entonces, cada elemento allí es semánticamente un todo :
{todos.map((todo, x) => ( <p> {x} {todo} </p> ))}Básicamente, los nombres son importantes. Una variable/tipo/propiedad/etc. El nombre debe decirle exactamente y sin ambigüedades qué es. Los nombres de variables deficientes conducen a un código confuso, y estar confundido acerca de su código es exactamente lo que lo trajo aquí.
Esta es realmente una mala práctica:
Lo que quieres hacer es usar el parámetro index que te da la función de mapa de Javascript:
Buena práctica
todo.map((todo, index) => ( <p>{index} - {todo}</p> ))Producción
0 - walk dog 1 - do yoga Ahora, si desea que el índice comience en 1, simplemente puede agregar +1 al index
todo.map((todo, index + 1) => ( <p>{index} - {todo}</p> ))Producción
1 - walk dog 2 - do yoga Dado que los valores del índice son únicos, puede usarlos para su beneficio al realizar otras acciones, como eliminar, etc. Por lo general, agrega el atributo key a los valores secundarios individuales de acuerdo con la documentación oficial de React de la siguiente manera
todo.map((todo, index + 1) => ( <p key={index + 1}>{index} - {todo}</p> ))donde clave es un valor único.
Además, cambie los nombres de sus variables a algo más significativo. Sugeriría cambiar todo a plural todos .
Su código final debería verse así:
function Product() { const [input, setInput] = useState(""); const [todo, setTodo] = useState([]); const addTodo = e => { e.preventDefault(); setTodo([...todo, input]); setInput(""); }; return ( <div> <form> <input value={input} onChange={e => setInput(e.target.value)} type='text' /> <button type='submit' onClick={addTodo}> Add! </button> </form> <h2 style={{ marginBottom: "0.5rem" }}>List of To-dos !</h2> {todo.map((count, index + 1) => ( <p key={index + 1}>{index} {todo}</p> ))} </div> ); }