React component doesn't toggle the value of a checkbox

Question

Having the following React component, it show the days of the week with a checkbox set to false near each of them, when a user clicks a checkbox, it changes its value from false to true.

It works fine but it seems too much code here:

import { Dispatch, SetStateAction, useState } from 'react';
import { FieldValues } from 'react-hook-form';
import { UseFormSetValue } from 'react-hook-form/dist/types/form';

import { Checkbox } from '../ui-components';

export enum Weekdays {
  MONDAY = 'monday',
  TUESDAY = 'tuesday',
  WEDNESDAY = 'wednesday',
  THURSDAY = 'thursday',
  FRIDAY = 'friday',
  SATURDAY = 'saturday',
  SUNDAY = 'sunday'
}

export default ({ setValue }: { setValue: UseFormSetValue<FieldValues> }) => {
  const [mondayValue, setMondayValue] = useState(false);
  const [tuesdayValue, setTuesdayValue] = useState(false);
  const [wednesdayValue, setWednesdayValue] = useState(false);
  const [thursdayValue, setThursdayValue] = useState(false);
  const [fridayValue, setFridayValue] = useState(false);
  const [saturdayValue, setSaturdayValue] = useState(false);
  const [sundayValue, setSundayValue] = useState(false);

  const handleWeekDay = (
    day: string,
    dayValue: boolean,
    setDay: Dispatch<SetStateAction<boolean>>
  ) => {
    setDay(!dayValue);
    setValue(day, !dayValue);
  };
  return (
    <>
      <Checkbox
        isCheckedInitial={mondayValue}
        onChange={() => handleWeekDay(Weekdays.MONDAY, mondayValue, setMondayValue)}
        label='monday'
      />
      <Checkbox
        isCheckedInitial={tuesdayValue}
        onChange={() => handleWeekDay(Weekdays.TUESDAY, tuesdayValue, setTuesdayValue)}
        label='tuesday'
      />
      <Checkbox
        isCheckedInitial={wednesdayValue}
        onChange={() => handleWeekDay(Weekdays.WEDNESDAY, wednesdayValue, setWednesdayValue)}
        label='wednesday'
      />
      <Checkbox
        isCheckedInitial={thursdayValue}
        onChange={() => handleWeekDay(Weekdays.THURSDAY, thursdayValue, setThursdayValue)}
        label='thursday'
      />
      <Checkbox
        isCheckedInitial={fridayValue}
        onChange={() => handleWeekDay(Weekdays.FRIDAY, fridayValue, setFridayValue)}
        label='friday'
      />
      <Checkbox
        isCheckedInitial={saturdayValue}
        onChange={() => handleWeekDay(Weekdays.SATURDAY, saturdayValue, setSaturdayValue)}
        label='saturday'
      />
      <Checkbox
        isCheckedInitial={sundayValue}
        onChange={() => handleWeekDay(Weekdays.SUNDAY, sundayValue, setSundayValue)}
        label='sunday'
      />
    </>
  );
};

So I've tried to make it in a shorter way. It doesn't set the checkbox to true anymore, don't know why isn't it working. Did I miss something?

import { FieldValues } from 'react-hook-form';
import { UseFormSetValue } from 'react-hook-form/dist/types/form';

import { Checkbox } from '../ui-components';

export default ({ setValue }: { setValue: UseFormSetValue<FieldValues> }) => {
  const week = [
    {
      name: 'monday',
      value: false
    },
    {
      name: 'tuesday',
      value: false
    },
    {
      name: 'wednesday',
      value: false
    },
    {
      name: 'thursday',
      value: false
    },
    {
      name: 'friday',
      value: false
    },
    {
      name: 'saturday',
      value: false
    },
    {
      name: 'sunday',
      value: false
    }
  ];

  const handleWeekDay = (day: string, dayValue: boolean) => {
    setValue(day, !dayValue);
  };

  return (
    <>
      {week.map((day) => {
        return (
          <Checkbox
            isCheckedInitial={day.value}
            onChange={(_, value) => handleWeekDay(day.name, !!value)}
            label=`${day.name}`}
          />
        );
      })}
    </>
  );
};

Answer 1

I think if you have the week array as state, your second approach would work. Try with this:

import { FieldValues } from 'react-hook-form';
import { UseFormSetValue } from 'react-hook-form/dist/types/form';

import { Checkbox } from '../ui-components';
const week = [
    {
      name: 'monday',
      value: false
    },
    {
      name: 'tuesday',
      value: false
    },
    {
      name: 'wednesday',
      value: false
    },
    {
      name: 'thursday',
      value: false
    },
    {
      name: 'friday',
      value: false
    },
    {
      name: 'saturday',
      value: false
    },
    {
      name: 'sunday',
      value: false
    }
  ];

export default ({ setValue }: { setValue: UseFormSetValue<FieldValues> }) => {
  const [weekState, setWeekState]=useState(week);
  
  const handleWeekDay = (dayName: string, dayValue: boolean) => {
    const day = weekState.find(d=>d.name === dayName);
    day.value = dayValue;
    setWeekState([...weekState]);
    setValue(dayName, dayValue);
  };

  return (
    <>
      {weekState.map((day) => {
        return (
          <Checkbox
            isCheckedInitial={day.value}
            onChange={() => handleWeekDay(day.name, !day.value)}
            label=`${day.name}`}
          />
        );
      })}
    </>
  );
};