I am implementing a search bar, so whenever a person enters a particular name it fetches the data from the API according to the data. Anybody who skilles in ReactJS latest version, please help me. I am sharing the search component , the header component and the error.

import { Fragment, useState, useEffect } from "react"
import { useNavigate, useLocation } from "react-router-dom";

const SearchBox = () => {
    const navigate = useNavigate()
    const {search : queryString} = useLocation()
    const [search, setSearch] = useState("")

    useEffect(() => {
        const queryParams = new URLSearchParams(navigate.location.search).get("search")
        // const queryParams = new URLSearchParams(navigate.location.search).get("search") //have to fix this bug
        setSearch(queryParams || "")
    }, [queryString])

    const handleInput = e => {
        setSearch(e.target.value)
    }

    const handleFormSubmission = e => {
        e.preventDefault();
        navigate({
            search: `search = ${search}`
        })
    }

    return (
        <Fragment>
            <form onSubmit={handleFormSubmission}>
                    <input name="search" type="text"
                        id="search" 
                        placeholder="Enter product name, category"
                        value={search}
                        onChange={handleInput}
                        /> 
                    <button type="submit">
                        <svg xmlns="http://www.w3.org/2000/svg" 
                            className="icon icon-tabler icon-tabler-search" 
                            width="20"
                            height="20" viewBox="0 0 24 24" 
                            strokeWidth="1.5" stroke="white" fill="none"
                            strokeLinecap="round" strokeLinejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <circle cx="10" cy="10" r="7" />
                            <line x1="21" y1="21" x2="15" y2="15" />
                        </svg>
                    </button>
                </form>
                <svg xmlns="http://www.w3.org/2000/svg" 
                    className="icon icon-tabler icon-tabler-search" 
                    width="20"
                    height="20" viewBox="0 0 24 24" 
                    strokeWidth="1.5" stroke="white" 
                    fill="none" strokeLinecap="round"
                    strokeLinejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <circle cx="10" cy="10" r="7" />
                    <line x1="21" y1="21" x2="15" y2="15" />
                </svg>
        </Fragment>
    )
}

export default SearchBox

//header component

import Cart from "../Cart"
import SearchBox from "../UI/Search"

const Header = () => {
    return (
        <header>
            <div className="nav-brand">
                <a to="/">
                    <span>AmaKart</span>
                    <svg xmlns="http://www.w3.org/2000/svg" 
                        className="icon icon-tabler icon-tabler-shopping-cart" 
                        width="30"
                        height="30" viewBox="0 0 24 24" 
                        strokeWidth="1.5" stroke="white" 
                        fill="none" strokeLinecap="round"
                        strokeLinejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <circle cx="6" cy="19" r="2" />
                        <circle cx="17" cy="19" r="2" />
                        <path d="M17 17h-11v-14h-2" />
                        <path d="M6 5l14 1l-1 7h-13" />
                    </svg>
                </a>
            </div>
            <div className="searchBox-container">
                <SearchBox/>
            </div>
            <div className="cart-container">
                <Cart/>
            </div>
        </header >
    )
}

export default Header

enter image description here

Please any one who knows React 16 version. Please help me.

CodePudding user response：

Your issues step from misunderstanding the react-router parts of the code.

The error is from navigate.location.search. You cannot get the query parameters from navigate because navigate is a function. There is no location property on navigate.

You are using v6 so you can use the new useSearchParams hook. With that hook, you no longer need to use useNavigate or useLocation in your code.

import { Fragment, useState, useEffect } from "react"
import { useSearchParams } from "react-router-dom";

const SearchBox = () => {
    const [searchParams, setSearchParams] = useSearchParams();
    const [search, setSearch] = useState("");
    
    const urlSearch = searchParams.get("search");

    useEffect(() => {
        setSearch(urlSearch || "");
    }, [urlSearch]);

    const handleInput = e => {
        setSearch(e.target.value);
    }

    const handleFormSubmission = e => {
        e.preventDefault();
        setSearchParams({
            search: search
        });
    }
...