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.
– Majid M., Commented Jul 27, 2021 at 7:48
I think you're trying to define an object as state and update the value of its properties, Am I true? — Majid M.
– Majid M., Commented Jul 27, 2021 at 7:50
yes thats the whole idea , but the moment i am doing an array of object update <Select name={keys[i]} onChange={(e: any) => handleChange(e)}> This is my component where the handleChange is used — PandaMastr
– PandaMastr, Commented Jul 27, 2021 at 8:04
@PandaMastr I answered the question. Please see the answer and if there's problem, please say to improve it. — Majid M.
– Majid M., Commented Jul 27, 2021 at 8:12

Majid M. · Accepted Answer · 2021-08-08 05:41:29Z

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 8, 2021 at 5:41

answered Jul 27, 2021 at 8:08

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

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

7 Comments

PandaMastr Over a year ago

your object is not updated when you click . It remains empty

Majid M. Over a year ago

@PandaMastr it changes when you change the select's options not with clicking on the select.

Majid M. Over a year ago

@PandaMastr Have you tried this approach?

PandaMastr Over a year ago

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 Over a year ago

Yes now it is updating . I am marking this answer as success for future reference

|

Jasur Kurbanov · Accepted Answer · 2021-07-27 06:52:51Z

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, 2021 at 6:52

Jasur Kurbanov

8303 gold badges11 silver badges23 bronze badges

1 Comment

PandaMastr Over a year ago

Yeah , but the idea is on handleChange to create only objects and NOT an array of objects . Your way is a bit of workaround

sanderdrummer · Accepted Answer · 2021-07-27 07:51:29Z

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

Collectives™ on Stack Overflow

Update initial useState of object - TypeScript , ReactJS

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related