updating array in object properties using property's name

Question

I have an object defined like this:

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor() {
    super();
    this.state = {
    lists: ["Dogs", "Cats"],
    items: {Dogs:[], Cats:[]}
    };
  }

  handleAddItem(item) {
    console.log(item);
  }

I have the variable

console.log(item);// output {Dogs:[{name: "lofi"}]}

I don't know how to verify which property is in the item (Dogs or Cats) so that I can update the object items{} to make it becоme in my example like this:

items{Dogs:[{name: "lofi"}], Cats:[]}

@RobbyCornelissen, the item's value can change, instead of output {Dogs: [{name: "lofi"}]} it could be {Cats: [{name:"tom"}]} — E.Mohammed
– E.Mohammed, Commented Jun 5, 2018 at 1:55
@E.Mohammed: Please try out my solution and let me know if it works for you — Isaac
– Isaac, Commented Jun 6, 2018 at 7:38

Isaac · Accepted Answer · 2018-06-06 07:15:42Z

1

const item = {Dogs:[{name: "lofi"}]}
let whichAnimal = Object.keys(item)[0]; //Dogs
let animalObj = item[whichAnimal][0]; //{name:'lofi'}

this.setState({ 
  items: this.state.items[whichAnimal].push(animalObj)
})

You can use Object.keys to get all the keys and assuming your item has only one variable at a time, we set with index 0. Storing it in a variable so that during setState we will know which array in exact we going to push the item into

answered Jun 6, 2018 at 7:15

Isaac

13k18 gold badges66 silver badges135 bronze badges

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

2 Comments

E.Mohammed Over a year ago

Sorry to be late to answer, it's working using your suggestion but with a little modification, to get the animaleObj I didn't use the keys let animalObj = item[whichAnimal]; // {name: 'lofi'} because there is only one object in it every time.

Isaac Over a year ago

Its ok since StackOveflow is just a site to get the idea on achieving what you wanted to anyway. Have fun!

Terry Wei · Accepted Answer · 2018-06-05 02:22:35Z

1

When you add "lofi" to items.Dogs, you should do like this:

this.state.items.Dogs.push({name:'lofi'})

The console output shows that you made the Cats disappear, so I wondered that you override the items state like:

this.state.items = {Dogs:[{name:'lofi'}]}

If I guess wrong, please let me know.

Edit:

Pass the values as parameter is like below:

add category:

var new_category = 'Birds';
this.state.items[new_category] = [];

add item to category:

var category = 'Birds';
var new_item = 'dori';
this.state.items[category].push({name: new_item });

edited Jun 5, 2018 at 2:22

answered Jun 5, 2018 at 1:52

Terry Wei

1,5518 silver badges16 bronze badges

4 Comments

E.Mohammed Over a year ago

But the items can change and I can have more than just Dogs and Cats, how I can access the items by the property that is the same in the item

Terry Wei Over a year ago

If you want to have birds, do like so: this.state.items.birds = []; this.state.items.birds.push({name:'dori'});

Terry Wei Over a year ago

Or you want to output only dogs, you can do like: console.log({Dogs: this.state.items.Dogs});

E.Mohammed Over a year ago

the items properties aren't predifiend, so I need a way to get the property's name of object as a variable that can change.

Luke101 · Accepted Answer · 2018-06-05 03:06:40Z

0

Since, this is a react app you want to use setstate.

import React, { Component } from 'react';
import './App.css';

class App extends Component {

    constructor() {
        super();
        this.state = {
            lists: ["Dogs", "Cats"],
            items: {Dogs:[], Cats:[]}
        };
    }

    handleAddItem(item) {
        console.log(item);
        var copy = JSON.parse(JSON.stringify(this.state.items));
        copy["Dogs"].push({name: "lofi"}];
        this.setState({items: copy});
    }
}

In react don't try to change the state directly. Also, its always a best practice to copy the object first because if you change the original state object it can make your app behave unpredictable.

edited Jun 5, 2018 at 3:06

answered Jun 5, 2018 at 2:55

Luke101

65.7k89 gold badges247 silver badges377 bronze badges

1 Comment

E.Mohammed Over a year ago

Thank you, but the variable 'item' can have object with different property, I have to verify if the property in the 'item' is a Dogs or Cats

Collectives™ on Stack Overflow

updating array in object properties using property's name

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related