Updating the state inside map function using react hooks using spread operator

Question

How do you update the value inside an array with the useState hook after i used it in a map function?

At the moment i have a handleChange function which works but i want to use the setState() directly inside the onChange in the input field.

const [array, setArray] = useState([1,2,3]);

{array.map((v,i) => {<input onChange={(e)=>setArray([...array, ...v, e.target.value])}/>})}

How do i update the value like this?

Chris · Accepted Answer · 2019-10-14 15:10:47Z

1

I'd advice against it, because such a one-liner makes the code quite unreadable, in my opinion.

Anyway, here it is...

{array.map((v,i) => {
  <input onChange={
    (e)=>setArray(
      [...array.slice(0, i), e.target.value, ...array.slice(i+1)]
    )}
  />
})}

Given the array [1,2,3,4,5] and i=2 you will have:

...array.slice(0, i) → [1,2]
e.target.value → the new value
...array.slice(i+1) → [4,5]

edited Oct 14, 2019 at 15:10

answered Oct 14, 2019 at 14:58

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

1 Comment

user9399141 Over a year ago

So it's not possible to change the value without slicing? Like we do with an object using the spread operator and then assigning new value to the property

Collectives™ on Stack Overflow

Updating the state inside map function using react hooks using spread operator

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related