react not updating child components visually after setstate

After deleting an "infraction" on the child component I update the state in the parent component, however the changes are not being updated visually. In the state it updates, however does not refresh the child component. It may be something to do with shallow updates but I am unsure how to fix it.

Also my updatedData updates but the state does not update straight away.

Can anyone help me out?

Here is the code

delClick = (id) => {      console.log('id when it come in: ', id);      const updatedData = this.state.students.map((student) => {          return {              ...student,              infractions: student.infractions.filter((infraction) => {                  return infraction.id !== id;              }),          };      });      console.log('updataed data: ', updatedData);      this.setState({          students: updatedData,      });      console.log('state students: ', this.state.students);  };  

https://stackoverflow.com/questions/66828107/react-not-updating-child-components-visually-after-setstate March 27, 2021 at 12:49PM