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

Felipe Lorenzzon · Accepted Answer · 2022-04-26 11:58:26Z

2

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]

answered Apr 26, 2022 at 11:58

Felipe Lorenzzon

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Koivula · Accepted Answer · 2021-01-28 18:39:11Z

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.

answered Jan 28, 2021 at 18:39

Jon Koivula

9271 gold badge11 silver badges27 bronze badges

Comments

SatvikVejendla · Accepted Answer · 2021-01-28 18:31:07Z

1

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

answered Jan 28, 2021 at 18:31

SatvikVejendla

4595 silver badges14 bronze badges

Collectives™ on Stack Overflow

React Multiple Input value in single array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related