SearchResults Component

Now we’re going to create the component that will render our search results on the page.

Let’s make a start by creating a SearchResults.js file inside our components folder and the corresponding test and css files in their respective folders.

Inside this file, import react and create a stateless functional component as we did before.

Inside the component body, create a Fragment and for now, create a p tag with "Search Results" inside.

Now import this component into our App.js file and render <SearchResults /> beneath <Search /> in the component body.

You should see Search Results now rendering in the browser. If it is, we’re good to move on.

Have a go at building this component on your own. Use the following mock data for now and once we’re done building our component we’ll remove the data for our search results instead.

img: https://images.unsplash.com/photo-1522030299830-16b8d3d049fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80

Once done, remember to write some tests for this component and we’ll move on to replacing our mock data with real search data.