Home > database >  How to make React search component
How to make React search component

Time:01-16

I am doing my first Ecommerce MERN stack project but i donot know how to make search component that will take the search input and return array of matching products

CodePudding user response:

If you want to make it fast you can get a graphic library like Material UI : https://mui.com/

Like this you can use pre-created components like this one that have autocomplete: https://mui.com/components/autocomplete/#search-input

You don't tell a lot of details about your case but to use it, you have to configure a route that returns you a list of the researched input everytime there is a change in this said input (configure the onChange function of the input section to request the list everytime there is a change).

CodePudding user response:

To add a search:

  1. Render your search bar component in the app
  2. Add your HTML elements
  3. Add a list of posts
  4. Filter the list based on your search query
  5. Adding immediate search or “search as you type”
  6. Adding SPA navigation with React Router
  7. “Search as you type”, SPA navigation and accessibility concerns
  8. Testing your component with React Testing Library
  9. Conclusion

If you want to know more precisely, you can view and understand the related material at the following URL. https://www.emgoto.com/react-search-bar/

Best regards.

  •  Tags:  
  • Related