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

Overflow scroll block containing a table within a div element

What methods can be used to prevent accessing 'res' after the resolution of getServerSideProps?

The vanishing HTML Div with a fixed height

Encountered a bus error resulting in a core dump while initializing a NextJs project

Retrieving information from the API and displaying it is a time-consuming process

Creating a visual that when clicked, reveals an enlarged version at a different location

The primary tab's background color in a Shiny app

Ensure that the divs are properly aligned with the paragraphs

What is the method for adjusting the subheader color on a Material UI card component?

The transparent DIV/waiting message may not be displayed in IE10

Issues encountered with initializing builder.io using npm

Shifting an HTML anchor to account for a stationary header - Safari compatibility with alternative CSS styling

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Guide to deploying a NextJs SSR React application on Microsoft Azure

jQuery navigation is experiencing issues due to conflicting buttons

Why do certain full screen websites not align with my screen width properly?

What specific features does CSS3 offer in terms of background-size properties?

Bringing together embedded chat and stream seamlessly with CSS styling

Pictures may become distorted when their width is smaller than the container

Steps for deploying and setting up a next.js application on a rented server that has apache2 already installed