Part 3(c) — Search Functionality

So far, we have all the functionality to gather results for the user based on their search criteria (with our “getResults” function). Now, when a user clicks submit:

• ResultsPage.jsx is rendered (through our Link in Searchbar.jsx)
• Our getResults function is invoked with the users input — sending a GET request to the API
• And the API responds with specific results for the user.

What we need to do now is sort through those results, and render them to the page.

Now we can give functionality to the remaining results related components. As a reminder: we want to sort through the results and render a box for each result. Each box will contain data for each result (Name: business_name, Address: business_address, etc.).

We will sort through the results in ResultsContainer.jsx and define the contents of each box in Results.jsx. As such ResultsPage.jsx will render ResultsContainer.jsx which will render Results.jsx. We’ll pass the results (stored in ResultsPage.jsx state under the key “data”) as props through each of these components.

To filter through the data let’s edit the ResultsContainer.jsx file. In ResultsContainer.jsx, assign the values of the props passed to a new variable called “results”. Create another variable called “resultArr” assigned to an empty array.

Then, declare a for loop to iterate through the props. In this loop we want to push a new box into the resultArr on each iteration. After looping through the data, the resultArr will contain a box for each business listing. ResultsContainer.jsx will render this resultArr.

Because Results.jsx renders only a single box, we can push a Results.jsx component into the resultsArr on each iteration — all while passing the results as props to the Results.jsx component.

ResultsContainer.jsx can then render the resultArr along with some header text “Browse Businesses in Your Area”.

ResultsContainer.jsx file

In Results.jsx we can define the info we want in each box. Each box will have a “title” paired with the matching result data (“Name”: “Father & Son Insurance”, etc.).

Results.jsx file

Now when a user enters a keyword, zip code, selects a category, and clicks submit :

1. The react router link on our submit button renders resultsPage.jsx and passes the info the user provided (stored in state) as props to resultsPage.jsx.
2. The “getResults” function is invoked, sending a GET request with each of the three user search requirements to our Soleo API. The API sends back a response including a status (of 200 if no errors occur) and the data we requested (the search results).
3. ResultsPage.jsx renders ResultsContainer.jsx which loops through each piece of data (each business listing) that our API sent back to us. With each loop, ResultsContainer.jsx pushes a box into an array that it later renders to the page.
4. Each box is rendered by Results.jsx. The boxes contain the content (business info) we’ve defined in Results.jsx.

You Did It! Finally, after 3 steps you have a working search bar! You now have everything you need for MVP (your minimum viable product).

In part 4 we’ll connect a database to add functionality for authentication. But first, give yourself a pat on the back!

-> Continue to part 4