How to create Filter / search in reactjs

Created a player which displays videos from many sources and with this tool you can only focus on value added videos. Let me tell you how to create simple filter like google in reactjs. I have used stackblitz to react the project its pretty simple go to stackblitz and select react javascript project you will land into the react javascript project.

Once clicked react(javascript) your project folder looks like this. Create components folder to add your components and css for holding your css. Open App.js and edit the file. Add following code Let me explain you what I have did, Added BrowserRouter for Link tag and added Element Added Search component.

Part 2.

Create 2 files in components folder Search with Search.js Avatar with Avatar.js to hold user information

Search with search.js

Let me explain the code, created users array to hold the users api data and player to hold the search box data. I am using UseEffect react hook to fetch the data from API and setting up that in users array object with setUsers function. onChange store my search parameter inside player variable with setPlayer function. Final part to render my html and values

Final result looks like this link https://react-d1dyj6.stackblitz.io