Toggle Boolean property inside Object in Array of Objects in state

Question

I have an array of Objects in state, like so:

this.state = {
  week: [
    {
      en: 'Mon',
      morn: false,
      night: false,
    },
//... the rest of the days...

I can successfully toggle the morn and night Booleans, like so:

this.setState(prevState => {
      prevState.week.map(day => {
        if (target.includes(day.en)) {
          if (target.includes('morn')) {
            day.morn = !day.morn;
          //^ right here
          }
          if (target.includes('night')) {
            day.night = !day.night;
          //^ and here
          }
        }
        return day;
      });
    });

eslint complains: Assignment to property of function parameter 'day'.

your eslint don't like that you are mutate the day argument, and he has a point. you should return new object. — Alon Valadji
– Alon Valadji, Commented Apr 1, 2019 at 22:59

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You are getting this because your linter has the following rule enabled: https://eslint.org/docs/rules/no-param-reassign

Assignment to variables declared as function parameters can be misleading and lead to confusing behavior, as modifying function parameters will also mutate the arguments object. Often, assignment to function parameters is unintended and indicative of a mistake or programmer error.

This rule can be also configured to fail when function parameters are modified. Side effects on parameters can cause counter-intuitive execution flow and make errors difficult to track down.

Do solve this, you could create a copy of your day object, which you can modify and return that instead:

this.setState(prevState => {
  prevState.week.map(day => {
    const tempDay = {...day};
    if (target.includes(day.en)) {
      if (target.includes('morn')) {
        tempDay.morn = !day.morn;
      }
      if (target.includes('night')) {
        tempDay.night = !day.night;
      }
    }
    return tempDay;
  });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 1, 2019 at 22:59

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

3 Comments

Stamatis Deliyannis Over a year ago

That almost did it, thanks! It was just const tempDay = day. Great!

Chris Over a year ago

@StamatisDeliyannis, glad it helped. Though you should do const tempDay = {...day} as that makes a copy whereas const tempDay = day only creates a new reference to the same object. Also, if this helped, please consider marking this answer as the accepted one and/or up-voting. Good luck

Stamatis Deliyannis Over a year ago

The final solution actually came by googling all eslint errors. I made the code better and readable by making a copy of the state object, manipulate it, and then replace the original with the new object.

Collectives™ on Stack Overflow

Toggle Boolean property inside Object in Array of Objects in state

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related