Remove element of an object from array of objects - react state

Question

I have an array of objects stored in state using React

this.state= {
  people: [
    {
      name: 'Tom',
      hobbies: ['dancing', 'swimming']
    }, {
      name: 'Dean',
      hobbies: ['playing', 'wondering']
    }, {
      name: 'Jack',
      hobbies: ['shooting', 'hiking']
    }, {
      name: 'Natalie',
      hobbies: ['rock', 'cats']
    }
  ]
};

I want to update the state by removing one specific element from hobbies. I tried to copy people array from state, then iterate through every person object then through every hobbies array to then check if the element is the one I want to remove, but I didn't manage to remove it, state was not changing. The thing I tried was to map it and afterwards filter.

What is the easiest and fastest way to do it? I just started learning React so I want to do it with setTimeout.

At the moment I have only code to choose random hobby from random person.

setTimeout(() => {
      const randInst = Math.floor(Math.random() * this.state.people.length);
      const hobbyIndex = Math.floor(Math.random() * this.state.people[randInst].hobbies.length);

    }, 500);

you can use .pop() or .splice() method, herehttps://www.w3schools.com/Jsref/jsref_splice.asp — Ninja
– Ninja, Commented Jun 7, 2018 at 2:43
If you want to do this properly you should not mutate your state directly. Do you want to this with indexes exactly or it is just an example? Can you use values for example? — devserkan
– devserkan, Commented Jun 7, 2018 at 2:54

Jackyef · Accepted Answer · 2018-06-07 03:05:33Z

2

You should create a new array and then set it as the new value for people in the state. One of the way is to use Array.prototype.map function.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

For example, you could do it like this:

const randomPersonIndex = Math.floor(Math.random() * this.state.people.length);
const randomHobbyIndex = Math.floor(Math.random() * this.state.people[randomPersonIndex].hobbies.length);

this.setState({
    people: this.state.people.map((person, index) => {
        if (randomPersonIndex !== index) {
            return person; // not person we are targeting, don't change it
        } else {
            return {
                ...person,
                hobbies: person.hobbies.filter((v, i) => i !== randomHobbyIndex),
            }
        }
    });
});

I made set up a codesandbox to demonstrate this for you. Check it out here.

edited Jun 7, 2018 at 3:05

answered Jun 7, 2018 at 2:44

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

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

2 Comments

devserkan Over a year ago

Good answer. I only suggest using callback function for setState here.

user9254191 Over a year ago

Yes, this is exactly what I couldn't do by myself :D Great, now I understand what is going on and how to do it! Very Thanks man :)

Collectives™ on Stack Overflow

Remove element of an object from array of objects - react state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related