输入字段动态映射但无法从所有字段 React JS 获取输入值

Question

I have 4-5 input fields mapped as per response. The user needs to enter value in each field but when I try to fetch the final value from all fields it gives me value of only the last input field. I would like to have values in an array which I can later join. There's one handler function for onChange. I have tried using spread operator but doesn't help.

const [inputValue, setInputValue] = useState({});
const handleChange = (value,name,i)=>{
 setInputValue({ ...inputValue, [name]: value })
}

records.map((record, i) => {
              return (
                <>
                    <input
                      onChange={(e) =>
                        handleChange(e.target.value, e.target.name, i)
                      }
                      name={record.title}
                      key={i}
                      value={record.value}
                 
                    />
                  </label>
                </>
              );
            })

Answer 1

You can use built in Form tag for that matter:

<form onSubmit={submitHandlerFunction}>
 {fields.map(field => (
  <input key={field.name} name={field.name}/>
  )}
 <button type="submit">Submit</button>
</form>