Looking to solve how to pass my search results to other components so when users use the search bar, the searched results gets displayed instead of that components rendered data.. in this case it would homeScreen. using react router v5 and i tried passing it through the router but many attempts didn't work, should i create a seperate search router too?

App.js:

<Container>
  <Route path="/" component={HomeScreen} exact />
  <Route path="/login" component={LoginScreen} exact />
  <Route path="/register" component={RegisterScreen} exact />
  <Route path="/product/:id" component={ProductScreen} exact />
  <Route path="/cart/:id?" component={CartScreen} exact />
</Container>

header.js:

function Header() {
  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;
  // const [items, setItems] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const debounce = useDebounce(searchResults, 500);
  const dispatch = useDispatch();
  const logoutHandler = () => {
    dispatch(logout());
  };

  useEffect(() => {
    axios.get(`/api/search/?search=${searchResults}`).then((response) => {
      setSearchResults(response.data[0]);
      console.log(response.data[0]);
    });
  }, [debounce]);

  const handleSearch = (e) => {
    setSearchResults(e.target.value);
  };
  return (
    <div>
      <Navbar bg="dark" variant="dark" className="navCustom">
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>eCommerce</Navbar.Brand>
          </LinkContainer>
          <Form className="d-flex">
            <Form.Control
              type="search"
              placeholder="Search"
              className="me-2"
              aria-label="Search"
              onChange={handleSearch}
            />
            <Button variant="outline-success">Search</Button>
          </Form>

HomeScreen.js:

function HomeScreen({ searchResults }) {
  const dispatch = useDispatch();
  const productList = useSelector((state) => state.productList);
  const { error, loading, products } = productList;
  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <div>
      {searchResults.length > 0 ? (
        <Row>
          {searchResults.map((product) => (
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
              <Product product={product} />
            </Col>
          ))}
        </Row>
      ) : (
        // Fall back to rendering regular products
        <Row>
          {products &&
            products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}
        </Row>
      )}
    </div>
  );
}

export default HomeScreen;

CodePudding user response：

This seems like a good use case of React Context. Within the Context, you can use useState to set the results. The Context can be provided to other components within your app.

CodePudding user response：

If you are getting an "Uncaught TypeError: searchResults is undefined" error in the console, it means that the searchResults variable is being accessed in your code, but it has not been defined or initialized. This can happen if you are trying to access the searchResults variable before it has been set to a value, or if you are trying to access the searchResults variable in a scope where it is not available.

To fix this error, you will need to make sure that the searchResults variable is defined and initialized before you try to access it in your code. You can do this by adding a default value for the searchResults variable when you declare it, or by checking if the searchResults variable is defined before you try to access it.

Here is an example of how you could fix this error:

// In the HomeScreen component
function HomeScreen({ location }) {
  // Set a default value for searchResults
  const searchResults = location.state ? location.state.searchResults : [];

  return (
    <div>
      {searchResults.length > 0 ? (
        <Row>
          {searchResults.map((product) => (
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
              <Product product={product} />
            </Col>
          ))}
        </Row>
      ) : (
        // Fall back to rendering regular products
        <Row>
          {products &&
            products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}
        </Row>
      )}
    </div>
  );
}

In this example, the searchResults variable is set to an empty array if the location.state property is undefined or null. This ensures that the searchResults variable is always defined and initialized, and it will prevent the "Uncaught TypeError: searchResults is undefined" error from occurring.