Update initial useState of object - TypeScript , ReactJS

Question

Hey guys i am currently new at TypeScript and i am trying to have a state value that conatins only objects . At the moment i have an array of objects like this :

[{ Ananas: "A", Banana: "B" , Citroen: "C"}]

, but the ultimate goal would be to have something like this :

{ Ananas: "A", Banana: "B" , Citroen: "C"}

I was defining my initial state like this

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

And now i try something like this , but i think is not the correct way to have initial state of objects only

 const [selectValue, setSelectValue] = useState({});

My update function is as simple as that

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

But as i said from above i want to update the state value to contain only objects and not an array of objects . So i wonder how can i do that. Thanks upfront

Could you share your component's cod which use `handleChange`? — Majid M., Jul 27 '21 at 07:48
I think you're trying to define an object as state and update the value of its properties, Am I true? — Majid M., Jul 27 '21 at 07:50
yes thats the whole idea , but the moment i am doing an array of object update ` — PandaMastr, Jul 27 '21 at 08:04
@PandaMastr I answered the question. Please see the answer and if there's problem, please say to improve it. — Majid M., Jul 27 '21 at 08:12

Majid M. · Accepted Answer · 2021-08-08T05:41:29.633

1

Based on your explanation and my understanding your question, you can do something like this. If there's any problem, please say to contribute and improve the answer:

import "./styles.css";
import * as React from "react";

export default function App() {
  const [selectValue, setSelectValue] = React.useState({});
  const handleChange = (e: any) => {
    var index = e.nativeEvent.target.selectedIndex;
    console.log(e.nativeEvent.target[index].text);
    setSelectValue({
      ...selectValue,
      [e.target.value]: e.nativeEvent.target[index].text
    });
  };
  React.useEffect(() => {
    console.log(selectValue);
  }, [selectValue]);
  return (
    <div className="App">
      <select onChange={(e) => handleChange(e)}>
        <option value="A">Ananas</option>
        <option value="B">Banana</option>
        <option value="C">Citroen</option>
      </select>
    </div>
  );
}

edited Aug 08 '21 at 05:41

answered Jul 27 '21 at 08:08

Majid M.

4,467
1
11
29

your object is not updated when you click . It remains empty – PandaMastr Jul 27 '21 at 08:43
@PandaMastr it changes when you change the select's options not with clicking on the select. – Majid M. Jul 27 '21 at 09:10
@PandaMastr Have you tried this approach? – Majid M. Jul 29 '21 at 13:40
i found another approach , but still in your sandbox when you click on the selected value it does not update the object at all – PandaMastr Jul 29 '21 at 13:43
@PandaMastr I've attached sandbox by mistake. – Majid M. Jul 29 '21 at 13:46
@PandaMastr Please see the new sandbox and pay attention to console.log – Majid M. Jul 29 '21 at 13:46
1

Yes now it is updating . I am marking this answer as success for future reference – PandaMastr Jul 29 '21 at 13:48

score 0 · Answer 2 · answered Jul 27 '21 at 06:52

0

Just get first value from array.

let myArr = [{ Ananas: "A", Banana: "B" , Citroen: "C"}] 
let newArr = myArr[0]
console.log(newArr)

// { Ananas: 'A', Banana: 'B', Citroen: 'C' }

answered Jul 27 '21 at 06:52

Jasur Kurbanov

724
2
9
20

Yeah , but the idea is on `handleChange` to create only objects and NOT an array of objects . Your way is a bit of workaround – PandaMastr Jul 27 '21 at 06:58

score 0 · Answer 3 · answered Jul 27 '21 at 07:51

You should clean up your types first. It's very hard to follow what you are actually doing and where the problem is. Where is e.target.value coming from? What type is selectValue? Let TypeScript help you and don't fight it with :any ;)

If I got it right I would tackle it somehow like that


type Fruits = Record<'Ananas' | 'Banana' | 'Citroen', string>
export const OkCool = () => {
  const initialData: Fruits[] = [{ Ananas: 'A', Banana: 'B', Citroen: 'C' }]
  const [selectedValue, setSelectedValue] = useState<
    Record<string, Fruits> | undefined
  >()

  const selectFruit = (key: string, fruitsArray: Fruits[]) => {
    // destruct from Fruits[] to get Fruits
    const [fruits] = fruitsArray
    setSelectedValue(value => ({ ...value, [key]: fruits }))
  }

  return (
    <>
      <input
        placeholder="key"
        onChange={e => selectFruit(e.target.value, initialData)}
      />
      {JSON.stringify(selectedValue)}
    </>
  )
}

Update initial useState of object - TypeScript , ReactJS

3 Answers3