状态上的奇怪行为

Question

I have a form with a questionary component, this questionary componente allow me to add sections of the questionary as you can see in the following image:

also as you can see I have a button to delete each section, here is the button on my section component:

<button
    className="circle-button delete-section"
    onClick={handleDeleteSection}
    data-section-id={sectionId}
    type="button"
  >
    &times;
  </button>

This button has a handleDeleteSection and this method is on the parent component and here is the method:

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const updatedSections = questionaryState.sections.filter(
      (section) => section.sectionId !== idToDelete
    );
    // update the state with new sections
    setQuestionaryState((questionaryState) => ({
      ...questionaryState,
      sections: updatedSections,
    }));
  };

but updatedSections is always with a wrong lenght eg: if I click on delete button of 'section 1' the updatedSections length is 0 if I click on delete button of 'section 3' the updatedSections length is 2 if I click on delete button of 'section 4' the updatedSections length is 3

but as you can see in the following image, the questionaryState.sections has 4 elements:

Any Idea or suggestion of what is going on here, becuase without the proper array of section I can not delete the section when the user press the delete button

Thanks in advance for your help

EDIT: UPLOAD VIDEO

Here is a video with an example: https://vimeo.com/469746051

Answer 1

You are using setQuestionaryState (state) hook in a wrong way , you should update the state after removing the clicked element by passing an object , and not using a callback function : as below

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const updatedSections = questionaryState.sections.filter(
      (section) => section.sectionId !== idToDelete
    );

    // update the state with new sections
    setQuestionaryState({
      ...questionaryState,
      sections: updatedSections,
    });
};

Answer 2

you need to spread your state before you filter to prevent passing a ref it safer that as it creates a new array , and then pass the filtered results directly to your "sections" in set state

const handleDeleteSection = (event) => {
    const idToDelete = event.target.dataset.sectionId;
    const sectonsTemp =  [...questionaryState.sections]
    const updatedSections =sectonsTemp.filter(
      (section) => section.sectionId !== idToDelete
    );
    // update the state with new sections
   setQuestionaryState({
      ...questionaryState,
      sections: updatedSections ,
    });

  };

Answer 3

This is working for me.

const handleDeleteSection = (idToDelete) => {
  const updatedSections = questionaryState.sections.filter(
    (section) => section.sectionId !== idToDelete
  );

  setQuestionaryState({
    sections: updatedSections
  });
};

HTML

<button
  className="circle-button delete-section"
  onClick={() => handleDeleteSection(sectionId)}
  type="button"
>
  &times;
</button>