Filter Search App
Search for your favorite products
steps to run project locally
- git clone
- npm i
- npm start
Step 1: Create a react project using either create react app or webpack
Here I used create-react-app
Step 2: Create 2 pages using hooks to navigate between them
Here I used React Router v6 navigating between pages with useNavaigate();
Step 3:
Add a form with at least one input and a table to each page
In this Application, I defined a component called TableData this contains a search input and a table of data. This component is rendered in two seperate pages. SearchPageOne
and searchPageTwo
.
Step 4: Add data to the tables using an ajax call. If you have an existing dataset you can use it.
Here I used the Fetch API to get data from this data set. Data Source - https://dummyjson.com/products
Step 5: Create a filter/search for each table using useEffect/useState to trigger from the input on the same page
Here I wrote a function that checks if the search input is empty, and if so it shows all the data, else it will filter the products according to the search input.
Step 6:
Using context maintain the filters on each page when navigating back and forth.
This step is a WIP - aim is for the searchValue
to persist while navigating between pages.
In my most recent comment I have updated my implementation to more closely match react documentation. I haven't cracked it just yet. But i'll get there! :)
Step 7: Post your code on your github.
Here it is :)
Thank you for reading!
Angeline