Search⌘ K
Home
Courses
The Road to React: The One with Class Components

Client- or Server-side Search

Explore how to shift search functionality from client-side filtering to server-side querying using the Hacker News API in React. Understand handling form submission events, preventing default browser behavior, and updating state with API results. This lesson helps you build efficient search by integrating real API calls triggered by explicit user actions.

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.

Javascript (babel-node)
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() method should use the same functionality as ...