I am trying to send my resultsArray data to another route “/search-results”. I have been using useNavigate() but by the time the page is showcased the results are not there. It says “no results found” I think it is a time issue, the page is loading faster than the results can populate. Please review my code and help! Thank you!
SearchBar Component:
import { useState } from "react";
import React from "react";
import SearchResults from "./SearchResults";
import { useNavigate } from "react-router-dom";
import "../../CSS/Search.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
//mock data
import mockData from "./mockData";
export default function SearchBar() {
// const [results, setResults] = useState([]);
const [shoppingResults, setShoppingResults] = useState([]);
const [loading, setLoading] = useState(false);
const [searchInput, setSearchInput] = useState("");
const navigate = useNavigate();
const handleSearch = async (e) => {
//remove this for MVP version
setLoading(true);
e.preventDefault();
setSearchInput(e.target.value);
// performSearch(searchInput);
//remove this for MVP version
const filteredResults = mockData.filter(item => item.title.toLowerCase().includes(searchInput.toLowerCase())
);
setTimeout(() => {
setShoppingResults(filteredResults);
setLoading(false);
}, 1000);
};
return (
<div className="search-bar-container">
<div className="search-bar">
<input className="search-bar-bar"
type="text"
placeholder="Search"
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
style={{ textAlign: "center" }}
/>
<button className="search-button" onClick={handleSearch}><FontAwesomeIcon icon={faSearch} size="lg" style={{color: "#231a1f",fontSize: "24px", fontWeight: "bold"}} /></button>
</div>
<div className="searchResults">
{loading ? (
<div>Loading...</div>
) : (
<SearchResults resultsArray={shoppingResults} />
)}
</div>
<div className="message">
<ul>
<li>What's on your list?</li>
<li>Start your search above</li>
</ul>
</div>
</div>
);
};
SearchResults Component:
import "../../CSS/SearchResults.css"
// import { useParams } from "react-router-dom";
export default function SearchResults({ resultsArray }) {
return (
<div className="result-page">
<div className="results-container">
{resultsArray ? (
resultsArray.map((result, index) => (
<div key={index} className="item-containter">
<div key={index} className="item-image"><img src={result.thumbnail} alt="Product Thumbnail" /></div>
<div key={index} className="item-facts">product rating: {result.rating}</div>
<div key={index} className="store-container">
<div key={index} className="store-logo"></div>
<div className="store-options">
{result.title} {result.price}</div>
</div>
</div>
))
):(
<div>No results found</div>
)}
</div>
</div>
)
}
Results Page:
import SearchResults from "../Components/Searches/SearchResults";
export default function Results() {
return (
<div className="search-results">
<SearchResults />
</div>
);
};
app.js:
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import React from "react";
// PAGES
import Home from "./Pages/Home";
import Search from "./Pages/Search";
import Results from "./Pages/Results"
function App() {
return (
<div className="App">
<Router>
{/* <NavBar /> */}
<NavBar />
<main>
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/about" element={<About/>} />
<Route path="/search" element={<Search />} />
<Route path="/search-results" element={<Results />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<LogIn />} />
</Routes>
</main>
</Router>
</div>
);
}
export default App;
