如何在按钮单击时添加新文本字段并将该输入字段的 integer 值添加到反应数组中

Question

I want to add a new input field on button click and add the integer value of that input field to an array in react

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 >

first input value is 100, second input value is 200, result should be like this when I add new input field: [100,200]

Answer 1

Try like below. You can keep only price state.

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;

Code sandbox

Answer 2

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)
}

<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 >