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

What is the best way to implement a dropdown in MUI and React that displays functional components as items?

What is the best way to utilize regex to replace two elements simultaneously?

Limit the usage of Lightning Web Component instances to only one per user

Tips for detecting the creation of an iframe before executing any javascript code

Leveraging JavaScript variables within a jQuery selector

Exploring the capabilities of Typescript arrays by implementing a forEach loop in conjunction with the

The error code ECONNREFUSED was encountered while trying to access an external API within the Next-Auth

Utilize ng-repeat to iterate over two arrays

Invalid file name detected during the download process

Endless cycle plaguing Grunt tasks

Using jQuery Ajax to send data and retrieve responses in the Codeigniter framework

selecting the ajax url for the datatable

Trying to assign a value to a property that is not defined

What is the best way to ensure that JavaScript code is executed in a specific sequence?

Ways to clear TextField status

Switching from Vue's Options API to Composition API is like transforming your code from

Determine the percentage of clicks on an HTML5 canvas radial progress bar

Configuring Next-auth CredentialProvider and setting up redirection

Animation issue in Material UI autocomplete label feature

"Delve into the art of utilizing negative space between elements with