javascript - React Multiple Input value in single array

Question

Hi I am making a react component which roughly looks like this below

import React, { useState } from "react";

export default function App() {
  const [data, setData] = useState([
    {
      id: 1,
      value: []
    },
    {
      id: 1,
      value: []
    }
  ]);

  const onchangeInput = (val, index) =>{
    let temp = ['',''];
    temp[index] = val.target.value
    console.log(temp)
  }

  return (
    <>
      {data.map((value, index) => {
        return <input key={index} onChange={(val)=>{onchangeInput(val, index)}} /> 
      })}
    </>
  );
}

In function onchangeInput I created an array variable temp where I want to store both input values , for example in first input if I insert first and in second value if I insert second then I want to have the temp value to ['first','second'] but everytime if I insert one input item , the other input item is resetting. How can I store both value in my temp array ?

Here is a live link of this code

question from:https://stackoverflow.com/questions/65943137/react-multiple-input-value-in-single-array

Answer 1

You are not using data and setData that you define in start of the component. Change it like this:

const onchangeInput = (val, index) => {
    let temp = data;
    temp[index] = val.target.value;
    setData(temp);
    console.log(temp);
  };

What I did is temp contains now data which is empty on first time. setData will save temp contents.