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

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.

Answer 2

Your issue is that by using:

let temp = ['', ''];

You are destroying the contents of it. So, the line after that initializes only 1 element in the array. To fix this, try moving the "let temp = ['', '']" outside of the function.

Ex:

Change this:

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

To this:

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

Answer 3

Jon's answer updates the state, but React won't update the UI. A better solution is using .map so that you copy the array to a new one instead of getting a reference to the existing one.

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

Without map, you're just editing the original array. Open Node.js and try this:

let a = [1,2,3];
let b = a;
b[0] = 0;
console.log(a);

Output: [0,2,3]