REACT how to store an Object instead of an Array of Objects in setState?

Question

I'm trying to store data as an Object and I get an Array of Objects, I'm trying to do this without mutating the original state Object which is an actual array of Objects, this is for my frontend logic which makes it straightforward if I have a simple Object(dict).

basically, im getting this:

currencies: [{MXN: "10"},{USD: "10"},{GBP: "10"}]

and im looking for this:

currencies: {MXN: "10", USD: "10", GBP: "10"}

shortened for easy reading, you can try it out in the CodeSandbox, just check the console it's ready.

If there is a known way to avoid creating the new state and just using the first one please let me know how to or where can I read about it, I'm still learning React. I was trying to create a property inside the class to store the values there but I think I'm not understanding how it works.

Something kind of like this:

currencies = {MXN: this.state.axiosCurrencies[0].value, 
              USD: this.state.axiosCurrencies[1].value, 
              GBP: this.state.axiosCurrencies[2].value}

Thanks for taking the time to read this, basically when I setState it creates an Array of Objects in this.state.currencies and I'm trying to only get an Object as the example states. — ricardoNava
– ricardoNava, Commented Sep 12, 2018 at 5:09
How an object contain same keys? What do you do having same keys in an object? it doesn’t make sense — Hemadri Dasari
– Hemadri Dasari, Commented Sep 12, 2018 at 6:12
@Think-Twice I did that to type it faster but I'm not looking to have the same keys, just to remove them from the array and create a simple object. — ricardoNava
– ricardoNava, Commented Sep 15, 2018 at 2:36

ricardoNava · Accepted Answer · 2018-09-19 05:33:25Z

The axiosCurrencies state should contain a key name and as well as value to generate an object as you need. So keep your USD, GBP etc as mentioned in below code.

Do something like below

    //keep your currencies as an object in state
    constructor(props){
          this.state = {
             currencies: {},
               // you need to construct your data axiosCurrencies like below
            axiosCurrencies: [{“id”: “01”, “name”: “MXN”, “value”: “abc”}, {“id”: “02”, “name”: “USD”, “value”: “xyz”}, {“id”: “03”, “name”: “GBP”, “value”: “def”}]
         }
    }

     //you can do below iteration in either componentDidMount or componentWillReceiveProps. Use componentWillReceiveProps if you are not using react v16.3 or greater version because this method is deprecated in latest versions.

    //do something like below to construct an object as you need.
    const obj = {};
    const { axiosCurrencies } = this.state;
     axiosCurrencies.forEach((item, index) => {
           obj[item.name] = item.value;
     });
     this.setState({
         currencies: obj
     });

Collectives™ on Stack Overflow

REACT how to store an Object instead of an Array of Objects in setState?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related