How to make React search component

Question

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

Answer 1

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).

Answer 2

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.

Answer 3

Using bootstrap:

import React, { useState } from "react";
import { useRouter } from "next/router";

const Search = () => {
  const [location, setLocation] = useState("");
  const [guests, setGuests] = useState("");
  const [category, setCategory] = useState("");
  const router = useRouter();
  const submitHandler = (e) => {
    e.preventDefault();
    if (location.trim()) {
      router.push(
        // this will push it to home page with query params
        // in home pag, based on these query params, you should be fetching data
        `/?location=${location}&guests=${guests}&category=${category}`
      );
    } else {
      router.push("/");
    }
  };
  return (
    // using bootstrap classes
    <div className="container container-fluid">
      <div className="row wrapper">
        <div className="col-10 col-lg-5">
          <form className="shadow-lg" onSubmit={submitHandler}>
            <h2 className="mb-3">Search Rooms</h2>
            <div className="form-group">
              <label htmlFor="location_field">Location</label>
              <input
                type="text"
                className="form-control"
                id="location_field"
                placeholder="new york"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
              />
            </div>
            <div className="form-group">
              <label htmlFor="guest_field">No. of Guests</label>
              {/* The <select> element is used to create a drop-down list. */}
              <select
                className="form-control"
                id="guest_field"
                value={guests}
                onChange={(e) => setGuests(e.target.value)}
              >
                {/* upto 6 guests */}
                {[1, 2, 3, 4, 5, 6].map((num) => (
                  // The <option> tags inside the <select> element define the available options in the drop-down list.
                  <option key={num} value={num}>
                    {num}
                  </option>
                ))}
              </select>
            </div>
            <div className="form-group">
              <label htmlFor="room_type_field">Room Type</label>
              <select
                className="form-control"
                id="room_type_field"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
              >
                {["King", "Single", "Twins"].map((category) => (
                  <option key={category} value={category}>
                    {category}
                  </option>
                ))}
              </select>
            </div>
            <button type="submit" className="btn btn-block py-2">
              Search
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Search;