Buenos días,
Estoy creando una aplicación de reacción, esta aplicación tendrá cuatro "lados" y cada lado puede tener valores diferentes, así que asigné el mismo componente 4 veces:
:[...Array(item)].map((data) => <Side key={ data } Style='wall-holder' InputClass='input-height' /> ) }Entonces, cada lado podría funcionar como algo propio, en cada lado el usuario puede ingresar un valor específico usando las entradas que existen en el componente lateral:
Side Component= input= 1, input =2; Side Component= input=3, input =5; Side Component= input=3, input =5; Side Component= input=3, input =5;nota: es solo un lado del componente, solo lo asigné 4 veces para poder reutilizarlo
Ahora quiero poder obtener todas esas entradas en una matriz u objeto para poder agregar todos los valores de entrada; sin embargo, cuando intento enviarlo a un estado global con el contexto de la API, solo conserva el último valor agregado. , entiendo por qué sucede esto (un poco), pero aún no sé cómo resolver este problema
Mantenga un estado en su componente principal como se muestra a continuación. utilice el índice para actualizar cada estado de entrada de los componentes laterales.
import {useState} from "react"; const ParentComp = () => { const [state, setState] = useState({}); return [...Array(item)].map((data, dataIndex) => <Side key={ data } Style='wall-holder' InputClass='input-height' setState={setState} dataIndex={dataIndex} /> ) } En su componente Side .
<input onChange={e => props.setState(prevState => { return { ...prevState, [props.dataIndex]: e.target.value }; }) } />;