score:0

issue

you are mutating your state object in handlenavparent.

const handlenavparent = (id, e) =>{
  let ischecked = e.target.checked;
  if (ischecked) {
    const checkboxarray = navarray; // <-- state reference
    const index = checkboxarray.findindex(object => object.id === id);
    checkboxarray[index].ischecked = !checkboxarray[index].ischecked; // <-- state mutation!
    setnav(checkboxarray); // <-- saved reference back into state
  }
}

this doesn't trigger a rerender since the navarray array reference never updated to a new array reference. you don't see the updated state until you click to submit the form and the submithandler calls setmsgerror and updates state and triggers a rerender with the side-effect from above.

solution

use a functional state update to toggle the checked value.

const handlenavparent = (id, e) =>{
  const { checked } = e.target;

  if (checked) {
    setnav(state => state.map(el => el.id === id ? {
      ...el,
      ischecked: !el.ischecked,
    } : el));
  }
}

Related Query

More Query from same tag