I have a class component, called ListOfItems.js, that lists a bunch of objects like so (btw, I am required to use class components, not function components):

class ListOfItems extends Component {
  construction (props) {
    super(props);
    this.state = {
      objectList: []
    }
  }
}

// This gets the list of objects to display
componentDidMount() {
   this.getObjectList();
}

componentDidUpdate() {
  //not sure what to put for "previous ObjectList"
  if( this.state.ObjectList !== previous ObjectList) {
     this.getObjectList();
  }
}

Inside of Object.js (the file for each object displayed in ListOfItems), I have a delete functionality, where if the user selected the "x" icon on the object, that object is deleted from the list. An instance of the Object.js inside of ListOfItems.js looks like this:

// BTW, I cannot change anything here. I have simplified
// my code very heavily for this purposes of this question.
{this.state.objectList.map(item) => {
  <Object 
    objectList={this.objectList}
    data={item}
    //few other props here
  >
}

I can see that the object is removed right after I click on "x", as per the api fetch response that I console logged. And when I refresh the page manually, the object is removed from the list displayed.

GOAL: I want the removal to happen in real time, right after the user clicks "x".