Tengo un componente de clase, llamado ListOfItems.js , que enumera un montón de objetos como este (por cierto, debo usar componentes de clase , no componentes de función ):

 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(); } }

Dentro de Object.js (el archivo para cada objeto que se muestra en ListOfItems), tengo una funcionalidad de eliminación , donde si el usuario seleccionó el ícono "x" en el objeto, ese objeto se elimina de la lista. Una instancia de Object.js dentro de ListOfItems.js se ve así:

 // 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 > }

Puedo ver que el objeto se elimina justo después de hacer clic en "x", según la respuesta de búsqueda de API que registré en la consola. Y cuando actualizo la página manualmente, el objeto se elimina de la lista que se muestra.

OBJETIVO: Quiero que la eliminación se realice en tiempo real, justo después de que el usuario haga clic en "x".