Estoy usando ganchos React para un proyecto en el que estoy trabajando. Me encuentro con una situación en la que quiero usar una matriz en el enlace useState, pero no estoy muy seguro de cómo hacerlo.
Creé una tabla que cambia el número de sus columnas de forma dinámica, según el número de días del mes.
He intentado algo como esto:
const [inText, setInText] = useState([]); const inputText = (e) => { setInText([...inText,{ id:inText.length, value:e.target.value }]); }numberOfDays es una variable que calculo. Contiene el número de días del mes actual.
const renderINP = () => { let td = []; for (let i = 1; i <= numberOfDays; i++) { td.push(<td key={i}><input type="text" onChange={inputText} /></td>); } return td; };Este es el código que muestra la tabla en el navegador:
<table> <tbody> <tr className="work-days"> <td>Working days</td> {renderINP()} </tr> </tbody> </table>Intento capturar el 'inText' con cosole.log(inText). Cuando escribo algo en la entrada, como 0 por ejemplo, crea un objeto, {id: 0, valor: '0'}. Cuando vuelvo a escribir, crea dos objetos {id: 0, value: '0'} y {id: 1, value: '0.'}. Además, cuando elimino algo, crea otro objeto.
¿Cómo puedo crear solo un objeto para cada entrada y cómo puedo obtener el valor de cada inText individualmente? Por ejemplo, obtenga el valor de inText en la segunda entrada, no el valor de todos los objetos.
useState se usa principalmente para mantener valores únicos. En este caso, tiene una matriz de objetos y desea actualizar el valor de los objetos individuales. useReducer es preferible.
Puedes leer más sobre useReducer
Esto debería hacer lo que estás buscando:
import React, { useReducer } from "react"; const App = () => { const reducer = (state, action) => { if (action.type === "ADD") { const newState = [...state]; newState.push({ id: action.id, value: action.value }); return newState; } if (action.type === "UPDATE") { const newState = [...state]; const foundItem = newState.find((item) => item.id === action.id); foundItem.value = action.value; return newState; } }; const initialState = []; const [state, dispatch] = useReducer(reducer, initialState); const numberOfDays = 7; const inputText = ({ id, value }) => { if (state.find((item) => item.id === id)) { dispatch({ type: "UPDATE", id, value }); } else { dispatch({ type: "ADD", id, value }); } console.log(state); }; const renderINP = () => { let td = []; for (let i = 1; i <= numberOfDays; i++) { td.push( <td key={i}> <input type="text" onChange={(e) => inputText({ id: i, value: e.target.value })} /> </td> ); } return td; }; return ( <> <table> <tbody> <tr className="work-days"> <td>Working days</td> {renderINP()} </tr> </tbody> </table> {JSON.stringify(state)} </> ); }; export default App;