Search Filter Component

Check Demo

Practice by following tutorial on youtube

Make a Search Bar with React (with API Calls) | Beginners Tutorial

Data use API from https://jsonplaceholder.typicode.com/

What the methods do I use here?

1. onFocus, onChange, onClick
2. userEffect, useCallback, useState, useRef
3. RegExp, split, replace

How many components do I create?

1. SearchBar.js: for search input
2. SearchList.js: for show list
3. UserInfo.js: for user information display

What is the goal for this project?

This small project can apply to React component directly, I've been done search filter in Vanilla Javascript with node.js before. Thus, I'm more familiar to deal with search methods for input with the particular behavior, like keydown, keyup, keypress, blur, focus...etc. And make the codes completed with search filter and make highlight for keywords searching.