Quiero agregar un nuevo campo de entrada al hacer clic en el botón y agregar el valor entero de ese campo de entrada a una matriz en reaccionar
const [price, setPrice] = useState([]) const [count, setCount] = useState([1]) const addNewTextField = () => setCount(prev => [...prev,1]) const addInputValue= () => { setPrice() console.log(price) } <Button onClick={addNewTextField}>Add TextField</Button > { count.map((item, i) => { return ( <TextField key={i} value={item.value} id={i} type='text' /> ) }) } <Button onClick={addInputValue}>submit</Button > el primer valor de entrada es 100, el segundo valor de entrada es 200, el resultado debería ser así cuando agregue un nuevo campo de entrada: [100,200]
Prueba como a continuación. Solo puede mantener el estado del price .
import { useState } from "react"; const App = () => { const [price, setPrice] = useState([""]); const addNewTextField = () => setPrice((prev) => [...prev, ""]); const addInputValue = (i, newValue) => { console.log(i, newValue); setPrice((prevState) => prevState.map((value, valueIndex) => valueIndex === i ? newValue : value ) ); }; console.log(price); return ( <> <button onClick={addNewTextField}>Add TextField</button>; {price.map((item, i) => { return ( <input key={i} placeholder={`input ${i}`} // value={item} id={i} type="text" onChange={(e) => addInputValue(i, e.target.value)} /> ); })} <button onClick={addInputValue}>submit</button> </> ); }; export default App; const [price, setPrice] = useState([]); const [count, setCount] = useState([1]); const [value, setValue] = useState(""); const addNewTextField = () => setCount(prev => [...prev,prev + 1]); const addInputValue= () => { setPrice(price.concat(value)); console.log(price) } return( <div> <Button onClick={addNewTextField}>Add TextField</Button > { count.map((item, i) => { return ( <TextField key={i} value={value} id={i} type='text' onChange={e => setValue(e.target.value)} /> ); }) } <Button onClick={addInputValue}>submit</Button > </div> );Componentes de botón y campo de texto:
function Button(props){ return( <button onClick={props.onClick}>{props.children}</button> ); } function TextField(props){ return( <input type="text" id={props.id} value={props.value} onChange={e=>props.onChange(e)}> ); }