The Road to React: The One with Class Components/

...

/

ES6 Spread Operators

ES6 Spread Operators

We will further extend our application here by modifying the onDismiss() method to tackle with the result object.

We'll cover the following...

The “Dismiss” button doesn’t work because the onDismiss() method is not aware of the complex result object. It only knows about a plain list in the local state. But it isn’t a plain list anymore. Let’s change it to operate on the result object instead of the list itself.

Press + to interact
onDismiss(id) {
  const isNotId = item => item.objectID !== id;
  const updatedHits = this.state.result.hits.filter(isNotId);
  this.setState({
    ...
  });
}

In setState(), the result is now a complex object, and the list of hits is only one of multiple properties in the object. Only the list gets updated when an item gets removed in the result object, though, while the other properties stay the same.

We could alleviate this challenge by mutating the hits in the result object. It is ...

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy