Styling in Next.js with conditions

Question

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        <Link href="/">Home</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >Store</Link>
        <Link href="/actors">Actors</Link>
      </div>
 )}

I have attempted the above code but unfortunately, it is not yielding the desired result. Is there an alternative method I could try?

css next.js

Answer 1

Answer №1

Using this in functional components is not allowed, as it is only accessible in class components. If you want to achieve that same functionality, you will need to manually write the code like this:

<Link href="/store" className={`${pathname === "/store" ? "active" : ""}`} >Store</Link>

Additionally, avoid using && in className, as it may add false to your className if the condition fails. Instead, use a ternary operator with an empty string in the false condition.

Answer 2

Using this in functional components is not allowed, as it is only accessible in class components. If you want to achieve that same functionality, you will need to manually write the code like this:

<Link href="/store" className={`${pathname === "/store" ? "active" : ""}`} >Store</Link>

Additionally, avoid using && in className, as it may add false to your className if the condition fails. Instead, use a ternary operator with an empty string in the false condition.

Answer 3

Answer №2

In addition to the insights shared by Rao Asim, one way to prevent repetition is by organizing them into an array and then using the .map method to iterate over the array.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        {[
          { label: "Home", href: "/" },
          { label: "Store", href: "/store" },
          { label: "Actors", href: "/actors" },
        ].map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

To enhance readability, you can extract the array declaration from the JSX:

function Component() {
  const pathname = usePathname();

  const navElements = [
    { label: "Home", href: "/" },
    { label: "Store", href: "/store" },
    { label: "Actors", href: "/actors" },
  ]

  return (
      <div className="links">
        {navElements.map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

Answer 4

In addition to the insights shared by Rao Asim, one way to prevent repetition is by organizing them into an array and then using the .map method to iterate over the array.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        {[
          { label: "Home", href: "/" },
          { label: "Store", href: "/store" },
          { label: "Actors", href: "/actors" },
        ].map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

To enhance readability, you can extract the array declaration from the JSX:

function Component() {
  const pathname = usePathname();

  const navElements = [
    { label: "Home", href: "/" },
    { label: "Store", href: "/store" },
    { label: "Actors", href: "/actors" },
  ]

  return (
      <div className="links">
        {navElements.map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

Styling in Next.js with conditions

Answer №1

Answer №2

Similar questions

If the div is visible in the viewport, then automatically scroll to the top

Click to shift the div downwards

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

Dynamic routing in Next.js with express leads to the refreshing of the page

Generating a Popup Alert with a DIV

Strange formatting in the internet explorer browser (IE)

Ways to resolve the issue of iOS Safari showcasing 'a' tag styling differently compared to other browsers

disappearance of background image at bootstrap breakpoint

The footer is being covered by the section, despite my attempts to address the issue with

Using JavaScript to open links in a new tab with the target

Adjusting font size in dynamic containers relatively

Looking to add a dropdown feature to my current main navigation bar

Footer that sticks to the bottom of the page across various pages

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

Tips on expanding the space between words in a scrolling "marquee" text

"Implementing a form loading state in NextJs Server Action: A Step-by-Step

Use CSS to apply hover effects to multiple sections of text at the same time

Not all Angular Material2 styles are being fully applied

I encountered an error stating "Module Not Found" while attempting to locate slick-carousel/slick/slick.css. This issue arose while implementing reacy-slick within my Next.js project

What is the best way to ensure that a navbar dropdown appears above all other elements on