Add key and value of object based on Array value

Question

Iam working on a little project here, but i had some puzzle to do.

So i had a state of react the value is like this

const [dayValue, setDayValue] = useState({
    monday: false,
    tuesday: false,
    wednesday: false,
    thursday: false,
    friday: false,
    saturday: false,
    sunday: false,
  });

And then i had an array like this

const arrayDays = ['monday', 'wednesday', 'saturday'];

What i want to do is to make all of my key object value that has the same value in arrayDays to change the value become true

I already tried some methods, one of it is i implement it on useEffect like this

    for (const x=0; x<arrayDays.length; x++) {
      for (const key in dayValue) {
        if (key === arrayDays[x]) {
          setDayValue({
            ...dayValue,
            [key]: true,
          });
          break;
        }
      }
    }

but its not working because setState hooks is a async function *CMIIW. does anyone know hot to solve this puzzle ?

prepare Ur data and at last set it to state

Ali Tarani
– Ali Tarani

2022-07-26 09:36:26 +00:00
Commented Jul 26, 2022 at 9:36 — Ali Tarani
– Ali Tarani, Commented Jul 26, 2022 at 9:36

jsejcksn · Accepted Answer · 2022-07-26 09:38:14Z

2

Set the state using the functional update argument:

setDayValue(dayValue => {
  const updated = {...dayValue};
  let needsUpdate = false;
  for (const day of arrayDays) {
    if (!(day in updated)) continue;
    updated[day] = true;
    needsUpdate = true;
  }
  return needsUpdate ? updated : dayValue;
});

answered Jul 26, 2022 at 9:38

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

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

1 Comment

Faishal Over a year ago

Thankyou sir ! you are very fast respond and it works as expected

Ali Tarani · Accepted Answer · 2022-07-26 09:41:50Z

0

var temp = {...dayValue};
arrayDays.forEach( day => {
    if (temp[day] !== undefined) temp[day] = true;
})
setDayValue(temp);

answered Jul 26, 2022 at 9:41

Ali Tarani

1581 silver badge8 bronze badges

Comments

g.p · Accepted Answer · 2022-07-26 09:44:22Z

0

Always try to use immutable data structures when updating state in react. So this is what i would recommend

const arr = ['monday', 'wednesday', 'saturday'];

const updateDayValue = (arr) => {
  const updated = {
    ...dayValue,
    ...arr.reduce((acc, cur) => {
      return {
        ...acc,
        [cur]: true
      }
    }, {})
  }
  setDayValue(updated)
}

answered Jul 26, 2022 at 9:44

g.p

3801 silver badge5 bronze badges

Comments

Talha Fayyaz · Accepted Answer · 2022-07-26 10:06:58Z

0

I have written small piece of code for this one. I could have written one liner but I choose to split my logic in small pieces for you understanding

const updateState = () => {
    const stateClone = { ...dayValue };
    const keyValueMap = Object.keys(stateClone).map((key) => ({
      key,
      value: stateClone[key]
    }));
    const updatedState = keyValueMap.reduce(
      (acc, { key }) => ({ ...acc, [key]: arrayDays.includes(key) }),
      {}
    );
    setDayValue(updatedState);
  };

Also if you have any confusions you can go through this sandbox link: https://codesandbox.io/s/falling-wood-gflskr?file=/src/App.js:350-699

answered Jul 26, 2022 at 10:06

Talha Fayyaz

5092 silver badges9 bronze badges

Comments

Mandeep Kaur · Accepted Answer · 2022-07-26 11:18:08Z

0

arrayDays.map(i => {
  Object.keys(dayValue).map(n => {
    if(i === n){
      setDayValue(daysN => {
        let days = {...daysN}
        days[n] = true
        return days
      })
    }
  })
})

answered Jul 26, 2022 at 11:18

Mandeep Kaur

1246 bronze badges

1 Comment

Saeed Zhiany Over a year ago

Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others.

Collectives™ on Stack Overflow

Add key and value of object based on Array value

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related