The Road to React: The One with Class Components/

...

/

Client- or Server-side Search

Client- or Server-side Search

Extending the search functionality to now search on the server side instead of client side.

We'll cover the following...

Now, when you use the Search component with its input field, you will filter the list. That’s happening on the client-side, though. We want to use the Hacker News API to search on the server-side. Otherwise, you would only deal with the first API response you got on componentDidMount(), the default search term parameter.

You can define an onSearchSubmit() method in your App component, which fetches results from the Hacker News API when executing a search in the Search component.

Press + to interact
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: null,
      searchTerm: DEFAULT_QUERY,
    };
    this.setSearchTopStories = this.setSearchTopStories.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);
    this.onSearchSubmit = this.onSearchSubmit.bind(this);
    this.onDismiss = this.onDismiss.bind(this);
  }
  ...
  onSearchSubmit() {
    const { searchTerm } = this.state;
  }
  ...
}

The onSearchSubmit() ...

Access this course and 1400+ top-rated courses and projects.