Correct way to update array from setState - Typescript , ReactJS

Question

I am currently still new at typescript and i do not know if i am doing the things right . I want to update my array and i want to set an initial state as an empty array. At the moment i am doing this :

 const [selectValue, setSelectValue] = useState<Array<string>>([]);

And my update function is this :

const handleChange = (e: any) => {
    setSelectValue((selectValue: any) => [{ ...selectValue, [e.target.value]: e.target.name }]);
  };

And the output is this :

0: {Ananas : "A"} , Banana : "B"

What am i doing wrong , because i want my output to be equal to one object like this :

0: {Ananas : "A" , Banana : "B"}

Marco Nisi · Accepted Answer · 2021-07-23 22:24:22Z

1

If you want to have only one item inside the array that collect all the keys then you have to do something like this:

const handleChange = (e: any) => {
  setSelectValue((selectValue: any) => {
    const newSelectValue = [...selectValue]
    if (!newSelectValue[0]) newSelectValue[0] = {}

    return newSelectValue.map((value, index) => {
      if (index === 0) {
        return { ...value, [e.target.value]: e.target.name }
      } else {
        return value
      }
    })
  })
};

edited Jul 23, 2021 at 22:24

answered Jul 23, 2021 at 13:51

Marco Nisi

1,25110 silver badges15 bronze badges

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

4 Comments

captain-yossarian from Ukraine Over a year ago

Btw, I believe you are mutating the state here newSelectValue[0]. While newSelectValue refers to new array, newSelectValue[0] refers to state value (old array), which should be immutable by the default.

Marco Nisi Over a year ago

@captain-yossarian yes you're right. I updated the answer in order to get rid of that mutability. What do you think now? It's better?

captain-yossarian from Ukraine Over a year ago

Pls remove const newSelectValue = [...selectValue] if (!newSelectValue[0]) newSelectValue[0] = {}

Marco Nisi Over a year ago

Why? If the array is empty and we not init the first element in that way, when we map the array it will do nothing.

Collectives™ on Stack Overflow

Correct way to update array from setState - Typescript , ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related