How do I change a property from an array of objects when setting React state?

Question

I am having a dumb question and would appreciate if someone could help. I have an array of objects:

weekDays: [
    {label: 'Sun', checked: false},
    {label: 'Mon', checked: false}, 
    {label: 'Tue', checked: false},
    {label: 'Wed', checked: false},
    {label: 'Thu', checked: false},
    {label: 'Fri', checked: false},
    {label: 'Sat', checked: false}]

and they will be check boxes. Once a checkbox is clicked I have to check the value that was given to that input and change the checked value.

This is what I came up with:

handleCheckBox = (e) => {
    console.log(e.target.value); //show value just right
    this.setState((previousState) => ({
      weekDays: previousState.weekDays.map(item => item.label === e.target.value 
        ? Object.assign(item, {checked: !item.checked}) 
        : item)
    }));

however this error shows up: Cannot read property 'value' of null. even though when I console.log this value it shows the value just right.

Does anyone know how to get by this?

Maybe you should have a look at this: stackoverflow.com/questions/50826078/… and this: reactjs.org/docs/events.html#event-pooling — Clafouti
– Clafouti, Commented Jan 18, 2019 at 17:26

Nik · Accepted Answer · 2019-01-18 17:36:11Z

1

In case you are using setState with function as a first argument, you can cache the value that you need:

handleCheckBox = (e) => {
console.log(e.target.value); //show value just right
const value = e.target.value; // our cache

this.setState((previousState) => ({
  // now we'll use cached value
  weekDays: previousState.weekDays.map(item => item.label === value 
    ? Object.assign(item, {checked: !item.checked}) 
    : item)
}));

answered Jan 18, 2019 at 17:36

Nik

2,2921 gold badge18 silver badges21 bronze badges

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

3 Comments

Jeff Goes Over a year ago

thank you! it worked. Why did I have to cache first??

Dave Newton Over a year ago

@JeffGoes See the event-pooling reference in the comments.

Nik Over a year ago

React uses synthetic events reactjs.org/docs/codebase-overview.html#event-system . By this reason your event after synchronous code will be cleared

Collectives™ on Stack Overflow

How do I change a property from an array of objects when setting React state?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related