React：从多个子组件更新父组件中的 state

Question

Am new to react and i encountered a problem while trying this out. I have a 2d array in the parent state which i mapped into several child's components. I have a check box in the parent component which when clicked should get the values in the all the child's components and update the 2d array. I created a function to do this in the parent component and send as prop to all the child's components but the change is not reflected in the 2d array present in the parent component. Only the first element in the array is updated. Help me out please. The function passed to the child component is

    updateStudentScores = (
    index,
    test1,
    test2,
    exams,
    totals,
    grades,
    remks,
    SChek,
    bgrnd
  ) => {
    const elementsIndex = this.state.students.findIndex(
      (element) => element.RealIndex == index
    );

    let newArray = [...this.state.tempStudents];
    newArray[elementsIndex] = {
      ...newArray[elementsIndex],
      Cas1: test1,
      Cas2: test2,
      Exam: exams,
      Total: totals,
      Grade: grades,
      Remark: remks,
      stillChecked: SChek,
      background: bgrnd,
    };
    this.setState({ tempStudents: newArray });
  };

tempStudents is the 2d array in the parent component state. Thanks for your response

Answer 1

The reason it only updates the first element is because when the first child component updates the 2D array it updates the parents state -> which sends it as an updated prop to all children -> causing them all to re-render and lose any inputted data.

You haven't posted any code... but the best way to do this is to have a handler called every time a child changes anything in the 2D array. (this is ideal)

To get your intended functionality you will need the checkbox to change a state that is passed as a prop to all the child components (causing them to re-render) and when that happens you can use a hook or a lifecycle method like "componentDidMount()" to call the handler of the parent with all the values needed to update the array.