Switching on and off a class in Next.js

Question

Switching on and off a class in Next.js

I'm a beginner with Next.js and React framework. My question is regarding toggling a class. Here's my attempt in plain JS:

function toggleNav() {
    var element = document.getElementById("nav");
    element.classList.toggle("hidden");
    element.classList.toggle("flex")
    element.classList.toggle("bg-slate-900")

    var toggler = document.getElementById("toggleNav");
    toggler.classList.toggle("false");
    toggler.classList.toggle("rotate-180");
}

I'm using Next.js in combination with TailwindCSS.

javascript next.js

Answer 1

Answer №1

If you're looking to expand your skills, diving into React is a great choice.

When working with React, direct element targeting can be tricky. One solution is to utilize the useRef() hook in the following manner:

const App = () => {
  const myRef = useRef()
   
  useEffect(()=>{
    myRef.current.classList.toggle() // and more..
  })
  
  return(
    <div> 
      <h1 ref={ref}>element you want toggle</h1>
    </div>
  )
}

Answer 2

If you're looking to expand your skills, diving into React is a great choice.

When working with React, direct element targeting can be tricky. One solution is to utilize the useRef() hook in the following manner:

const App = () => {
  const myRef = useRef()
   
  useEffect(()=>{
    myRef.current.classList.toggle() // and more..
  })
  
  return(
    <div> 
      <h1 ref={ref}>element you want toggle</h1>
    </div>
  )
}

Switching on and off a class in Next.js

Answer №1

Similar questions

Having trouble running Next.js on iOS? An error occurred while trying to execute the 'insertBefore' function on the Node, resulting in a NotFoundError with the message insertBefore([native code]). It seems like the object you are

Is there a way to maintain the checked status of the checkboxes after a page refresh?

Why are Chakra UI components not responsive to small screen sizes?

Vue alert: Issue encountered in data() - "TypeError: Unable to convert undefined or null to object"

Styling text using CSS depending on the displayed text

Guide to making a button in jQuery that triggers a function with arguments

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

Update the Vue method

Show a dynamic modal with a widget displayed inside

If the option of "none" is chosen, I would like to deactivate all checkbox selections

Concealing a button once the collapse feature is toggled in Bootstrap

Having issues with Next.js server-side rendering when integrating API functionality

Express is unable to locate the specified property

Print directly without the need for a preview or dialog box

Obtain precise JSON information using Node.js

Encountering compilation issues with Jest in Vue project, yet the tests are successfully passing

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Some pages are compatible with JS while others are not... Although, the file can be found in the page source

The backspace key is unresponsive following the use of a jQuery class

Using PM2 to Manage Your PHP Scripts in Cluster Mode