The functions currently work correctly on the initial page. However, when navigating to another page, they do not function as intended. On the initial page, there is a simple navbar with a search form, followed by another navbar with links. Additionally, there are three cards displayed, each containing a title, category, description, and a link to navigate to a different page.
The issue arises when navigating to another page from one of the cards. The desired behavior is to maintain the functionality of the search form and category selection regardless of the location. For example, if I click on a card that takes me to the “USA page” displaying “USA Category content,” I expect to be able to search for other cards without having to go back to the initial page.
To clarify, when searching or changing the category on any page, the current content (e.g., “USA Category content”) should disappear, and the cards should be filtered and displayed accordingly. The same applies to the category change functionality.
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
import "./App.css";
function App() {
const [searchQuery, setSearchQuery] = useState('');
const [selectedCategory, setSelectedCategory] = useState('all');
const [searchButtonClicked, setSearchButtonClicked] = useState(false);
const filteredData = [
{
id: 1,
title: "Hola Mexico",
category: "Mexico",
pagePath: "/mexico",
text: "Learn More",
description: "loren ipsum loren ipssum loren ipsum"
},
{
id: 2,
title: "Hola USA",
category: "USA",
pagePath: "/usa",
text: "Learn More",
description: "loren ipsum loren ipssum loren ipsum"
},
{
id: 3,
title: "Hola America",
category: "America",
pagePath: "/america",
text: "Learn More",
description: "loren ipsum loren ipssum loren ipsum"
},
];
const handleSearchChange = (event) => {
setSearchQuery(event.target.value);
};
const handleSearchButtonClick = (event) => {
event.preventDefault();
setSearchButtonClicked(true);
};
const handleCategoryChange = (category) => {
setSelectedCategory(category);
setSearchQuery('');
setSearchButtonClicked(false);
};
const filteredCards = filteredData.filter((item) => {
if (selectedCategory === 'all') {
return item.title.toLowerCase().includes(searchQuery.toLowerCase());
} else {
return (
item.category === selectedCategory &&
item.title.toLowerCase().includes(searchQuery.toLowerCase())
);
}
});
return (
<div>
<div className="navbar">
<form className="search-form">
<input
type="text"
className="search-input"
placeholder="Search"
value={searchQuery}
onChange={handleSearchChange}
/>
<button
type="submit"
className="search-button"
onClick={handleSearchButtonClick}
>
Go
</button>
</form>
</div>
<nav className="navbar2">
<ul className="nav-links">
<li>
<button onClick={() => handleCategoryChange('all')}>All</button>
</li>
<li>
<button onClick={() => handleCategoryChange('Mexico')}>Mexico</button>
</li>
<li>
<button onClick={() => handleCategoryChange('USA')}>USA</button>
</li>
<li>
<button onClick={() => handleCategoryChange('America')}>America</button>
</li>
</ul>
</nav>
<Routes>
<Route
path="/"
element={<HomePage filteredCards={filteredCards} />}
/>
<Route
path="/mexico"
element={<MexicoPage filteredCards={filteredCards} />}
/>
<Route
path="/usa"
element={<USAPage filteredCards={filteredCards} />}
/>
<Route
path="/america"
element={<AmericaPage filteredCards={filteredCards} />}
/>
</Routes>
</div>
);
}
function HomePage({ filteredCards }) {
return (
<>
{filteredCards.length === 0 ? (
<p>No matching cards found.</p>
) : (
filteredCards.map((item) => (
<div className="card" key={item.id}>
<h2 className="card-title">{item.title}</h2>
<h2 className="card-category">{item.category}</h2>
<p className="card-description">{item.description}</p>
<Link to={item.pagePath}>{item.text}</Link>
</div>
))
)}
</>
);
}
function MexicoPage() {
return (
<>
<h2>Mexico category content</h2>
</>
);
}
function USAPage() {
return (
<>
<h2>USA category content</h2>
</>
);
}
function AmericaPage() {
return (
<>
<h2>America category content</h2>
</>
);
}
export default App;
I passed the functions as props to the components, I change this code without success.
const filteredCards = filteredData.filter((item) => {
const { category, text, description } = item;
const lowerCaseSearchTerm = searchTerm.toLowerCase();
return (
(!selectedCategory ||
selectedCategory === "All" ||
category === selectedCategory) && // <-- this conditional
(category.toLowerCase().includes(lowerCaseSearchTerm) ||
text.toLowerCase().includes(lowerCaseSearchTerm) ||
description.toLowerCase().includes(lowerCaseSearchTerm))
);
}); for this one
const filteredCards = filteredData.filter((item) => {
const { category, text, description } = item;
const lowerCaseSearchTerm = searchTerm.toLowerCase();
return (
(!selectedCategory ||
selectedCategory === "All" ||
category === selectedCategory) || // <-- be more inclusive
(category.toLowerCase().includes(lowerCaseSearchTerm) ||
text.toLowerCase().includes(lowerCaseSearchTerm) ||
description.toLowerCase().includes(lowerCaseSearchTerm))
);
});
