Fruit search filter

  • React
  • Exercises
  • Fruit search filter

React exercise number 7

  • Components
  • JSX
  • Lists
  • useState

Fruit search filter

Let's build a React app that searches and filters different fruits!

Quick start

Start with this code as a boilerplate for the exercise.

Exercise

Step 1

Make it so that whenever the user enters text in the search input, the fruits are filtered by name, and only the ones that match are shown. For example for the text "ap", the app should show "Apple", "Apricot", "Grape" and "Papaya".

Step 2

Change the FruitCard component so that each card has the background color of the corresponding color. The fruit array is in a JSON file at /src/data/fruits.json.

Step 3

Creates a component called FruitList in /src/components/FruitList.jsx responsible for receiving an array of fruits as a prop and rendering the grid ul[className="fruitGrid"].

Step 4

What happens when what the user searches for doesn't match any fruit in our array? Creates a component called EmptyList in /src/components/EmptyList.jsx and renders it whenever the user's search doesn't match any fruit. This component should have an h1 element with the text "Whoops, no results!", and a p element with the text "No results found for: {searchQuery}", where searchQuery is the search string of the user.

Step 5

Add a button with the text "Reset" to the application that erases the text entered by the user.

Step 6

Whenever the filter result is only 1 and only one fruit, it shows a browser prompt to the user with the message "Unique result found: {result}!", where result is the name of the fruit found. To display a bowser prompt with a custom message you can use the following function:

const message = "Hello world!";
window.confirm(message);

Step 7

Whenever the user clicks on a fruit card, it shows the description of that fruit in a browser prompt, identical to the previous step, but with the format "{fruitName}: {fruitDescription}", where fruitName is the name of the fruit that was clicked and fruitDescription is the description of that same fruit.

Extra

Step 1

Whenever the user clicks on a fruit, instead of displaying the description in a browser prompt, it displays the description in a custom modal component named FruitModal. This component must be in /src/components/FruitModal.jsx and must represent a modal where we will have 3 elements: an h1 with the name of the fruit, a p with the description of the fruit, and a button with the text "Cancel" which will close the modal whenever it is clicked.

Step 2

In the same modal add another button with the text "Search on Google", which when clicked opens in a new tab the search page for that same fruit on Google. To search for a fruit on Google you can use the following URL passing the correct q query param:

https://google.com/search?q=banana