Reputation: 15
When i do this ternay operator the result is that the searchbox desappear from every page. The idea is only to show in /products. Thank you if you could help me with this, very much appreciated.
function Header() {
let location = useLocation();
{location === "/products" ? (
<li>
<form action="#" class="form-box f-right">
<input
type="text"
name="Search"
placeholder="Search products"
/>
<div class="search-icon">
<i class="ti-search"></i>
</div>
</form>
</li>
) : null}```
Upvotes: 1
Views: 31
Reputation: 3868
location
is an object (try to console.log it).
You probably want location.pathname
function Header() {
let location = useLocation();
console.log('this is the location obj: ', location);
{
location.pathname === '/products' ? (
<li>
<form action="#" class="form-box f-right">
<input type="text" name="Search" placeholder="Search products" />
<div class="search-icon">
<i class="ti-search"></i>
</div>
</form>
</li>
) : null;
}
}
for additional reference: https://reactrouter.com/web/api/Hooks/uselocation
Upvotes: 1