0

I have the following sample piece of code that I'm using to learn about the spread operator and updating react state. I understand how it is working, but I don't fully understand how the return {...inst, hobbies} syntax functions to update the nested hobbies array.

My confusion is due to the fact that when I use hobbies.slice(hobbyIndex,1) instead of hobbies.splice(hobbyIndex,1), my hobbies array does not change event though different hobbyIndex values are being passed in.

My expectation is that if I get a hobbyIndex value of 0, then hobbies should become just the values in the array from index 0 to 1, so basically the first element in the array. My console log confirms that. However, when my app runs, the value of hobbies is still the same as what is in the hobbies list of the randomly selected instructor. Why??

       this.state = {

            instructors: [
                {
                    name: "Jimmy",
                    hobbies: ['soccer','reading','sports']
                },
                {
                    name: "Paul",
                    hobbies: ['sailing','skiing','diving']
                },
                {
                    name: "Sam",
                    hobbies: ['eating','sleeping','TV']
                },
            ]
        };

            const randInst = Math.floor(Math.random() * this.state.instructors.length);
            const hobbyIndex = Math.floor(Math.random() * this.state.instructors[randInst].hobbies.length);

        const instructors = this.state.instructors.map((inst,idx) => {
            if (idx === randInst) {
                const hobbies = [...inst.hobbies];
                //hobbies.splice(hobbyIndex,1); //this works to remove the specified index
                hobbies.slice(hobbyIndex,1); //this works in terms of console.log showing the expected value based on the hobbyIndex value
                console.log("value of random selected hobby and hobbies to return: ", hobbyIndex, hobbies);
                return {...inst,hobbies} //inst object's hobbies array seems to update when splice is used, but not when slice is use... 
            }
            return inst;
        });
mo_maat
  • 2,110
  • 12
  • 44
  • 72
  • 1
    Cause `splice` mutates hobbies while `slice` does not. This actually not related to destructuring – Jonas Wilms Jan 27 '18 at 22:09
  • Perfect! That's simply what I was thinking but wasn't sure. I read through the MDN docs, but didn't see that explicitly stated. – mo_maat Jan 27 '18 at 22:13
  • So basically, splice will mutate whatever array it is applied to whereas slice requires assignment to another variable? – mo_maat Jan 27 '18 at 22:14
  • Exactly. Spice returns a new array and does not kutate the array it is called on – Jonas Wilms Jan 27 '18 at 22:17
  • Ok. So in theory, if I was to assign the slice to a variable, say newHobbies, and then replace `hobbies` with `newHobbies` in my spread syntax like this: `return {...inst,newHobbies}` then I should get the new list of hobbies in my inst object?? – mo_maat Jan 27 '18 at 22:19
  • In practise too... `{ ...inst, hobbies: newHobbies}` – Jonas Wilms Jan 27 '18 at 22:20
  • Awesome!! That's what I was missing... so basically, the reason using `{ ...inst, hobbies}` worked is because I was using the same variable name, right? As in that "shorthand" works when the variable name is the same? Meaning I did not have to do `{ ...inst, hobbies: hobbies}`. And lastly, in terms of understanding the spread syntax, am I right to interpret it as basically merging/overwriting the value of `hobbies` into the `inst` object? – mo_maat Jan 27 '18 at 22:28
  • Yes. The spread thing shallow copies inst into a new object and sets the `hobbies` property to the `hobbies` variable. – Jonas Wilms Jan 27 '18 at 22:30
  • Great! All set! Thanks! – mo_maat Jan 27 '18 at 22:36

0 Answers0