CODEWITHSUNDEEP
javascriptreactjs
German alle
German alle

Reputation: 15

I want the searchbox to disappear from all pages except product page with React.js

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

Answers (1)

Tomer Almog
Tomer Almog

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

Related Questions