score:1

Accepted answer
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;

score:0

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

Related Query

More Query from same tag