[SOLVED] React / Semantic UI setState for toggling a property on an object

JavaScript
1

Hey everyone, I am trying to create a generic toggle function in my React application using Semantic UI React. I have a properties on my application’s state which are object arrays. The object arrays looks like this:

this.state = {
      days: [
        {
          name: 'M',
          value: true
        },
        {
          name: 'Tu',
          value: true
        },
        {
          name: 'W',
          value: true
        },
        {
          name: 'Th',
          value: true
        },
        {
          name: 'F',
          value: true
        },
        {
          name: 'Sa',
          value: true
        },
        {
          name: 'Su',
          value: true
        }
      ]
    }

Since there are multiple object arrays like this, I am trying to make my handleToggle function generic to handle toggling any object array. So the handle toggle function takes in the group(object array name) and index from the click event. I then want to change the value on the object and then update the state. I am having issues figuring out the syntax on the return statement in the setState function. Here is my function:

 handleToggle = (e, data) => {
    let {idx, group} = data;

    this.setState((previousState)=>{
      let toggledItem = previousState[group][idx]; //this targets the object which is being toggled
      
      return {
        ...previousState, [toggledItem]: !previousState[group][idx].value //not sure of the syntax here...
      } 
    });
  }

I have seen plenty of demonstrations which look like the one below, but they don’t help me in figuring out how to change just the property on object within the state. Any help would be much appreciated. Thank you!

function incrementFooBy(delta) {
    return (previousState, currentProps) => {
        return { ...previousState, foo: previousState.foo + delta };
    };
}
3

Nevermind, changed some things around and figured it out.

5

So it’s kind of silly. I was doing some testing with the function at one point and, without including a return statement in my setState function, somehow my state was being manipulated, even when I was manipulating this.previousState and not this.state. I thought I was doing something wrong, and directly manipulating the state without properly doing it the correct way through setState. Turns out it must have been something else that must have been causing the state change (my code has changed considerably, and it works now so I haven’t investigated what was happening before).
Anyway, here is my new toggle function that, if you take out the return function, does not manipulate the current state.

handleToggle = (e, data) => {
    let {idx, group} = data;
    this.setState((previousState)=>{
      previousState[group][idx].value = !previousState[group][idx].value

      return previousState;
    });
  }
1 Like