score:1

okay. so the following is bad practice state.theme.quiz.quizsleepcomfort.justme = checkeditems;

you should pass a function to the question component, something like onchange. the onchange function should update the state in your parent component. use the spread operator ... to get a copy of the old object. for example

const onchange = (newstate) =>
  setstate((oldstate) => ({
    ...oldstate,
    justme: { ...oldstate.justme, ...newstate },
  })); 

the resulting object will contain all the properties of the original state but will overwrite any property set on newstate in justme. if the property that you want to update is more nested, just repeat the steps of spreading.

--- update ---

i have added an example that i think is close to what you are trying to achieve.

const parent = () => {
  const [state, setstate] = usestate(initialstate);

  const onchange = usecallback(
    (newstate) =>
      setstate((oldstate) => ({
        ...oldstate,
        theme: {
          ...oldstate.theme,
          quiz: {
            ...oldstate.theme.quiz,
            quizsleepcomfort: {
              ...oldstate.theme.quizsleepcomfort,
              justme: {
                ...oldstate.theme.quizsleepcomfort.justme,
                ...newstate,
              },,
            },
          },
        },
      })),
    [],
  );

  return <question onchange={onchange} />;
};

const checkboxes = [
  {
    label: 'firm',
    value: 'firm',
  },
  {
    label: 'medium',
    value: 'medium',
  },
  {
    label: 'soft',
    value: 'soft',
  },
];

const question = ({ onchange }) => {
  const [checkeditems, setcheckeditems] = usestate([]);

  useeffect(() => {
    onchange(checkeditems);
  }, [checkeditems, onchange]);

  return (
    <questioncommoncontainer>
      {checkboxes.map((item, id) => (
        <quizcheckbox
          label={item.label}
          name={item.label}
          value={item.value}
          selected={checkeditems[item.value] === true}
          onchange={(e) => {
            setcheckeditems((oldcheckeditems) => ({
              ...oldcheckeditems,
              [e.target.value]: e.target.checked,
            }));
          }}
        />
      ))}
    </questioncommoncontainer>
  );
};

export default connect(question);

as you are having a really nested object to update, it might be worth taking a look at object.assign


Related Query

More Query from same tag