Declaring a CSS Module Class as a Variable in NextJS

Question

Please excuse me if I forget anything - this is my first post on Stack Overflow.

The function's purpose is to open and close my hamburger menu. I have attached a snapshot of the JSX file where this issue is: NavbarLinks.jsx. The lines of code that I am struggling with are 15 and 18 where I am trying to declare a CSS module class as a variable.

const [navLinkOpen, navLinkToggle] = useState(false);
  const handleNavLinksToggle = () => {
    navLinkToggle(!navLinkOpen);
  };

  const renderClasses = () => {
    let classes = {`${styles.navLinks}`};

    if (navLinkOpen) {
      classes += {`${styles.active}`};
    }

    return classes;
  };

I then call the returned class inside the ul tag on line 27.

<ul className={renderClasses}>

I have tried several variations of declaring this class as a variable, what I am showing you here is just my last attempt. I am aware that the attempt I am using has broken the code. - I am fairly new to JavaScript and instead of simply following YouTube guides, I learn better by trying things myself.

Please try and answer the question I have instead of suggesting an alternative method, purely because I just want to learn more about this! - but if you do have alternative methods of what I am trying to achieve here, I would very much like to see them too.

I'll also include a snapshot of the CSS Module file that I am working with just incase you may find it useful: NavbarLinksStyle.module.css

Thanks in advance for any help - will be around to answer any questions.

Toni Bardina Comas · Accepted Answer · 2022-06-26 12:57:33Z

1

first of all, congrats on the post. It's very well explained. The code you shared seems to be pretty fine overall, but from what I can see you are missing the execution of the renderClasses function.

const [navLinkOpen, navLinkToggle] = useState(false);
  const handleNavLinksToggle = () => {
    navLinkToggle(!navLinkOpen);
  };

  const renderClasses = () => {
    let classes = styles.navLinks;

    if (navLinkOpen) {
      classes += styles.active;
    }

    return classes;
  };

  {...}
    <ul className={renderClasses()}> 
  {...}

Also, you can achieve the same result by using a variable instead of a function:

const renderClasses = `${styles.navLinks} ${navLinkOpen ? styles.active : ''}`;

EDIT: Also as @Mina pointed out you should get rid of the curly braces on your render function.

answered Jun 26, 2022 at 12:57

Toni Bardina Comas

1,8081 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Liam Rourke Over a year ago

Amazing, thank you! I have just taken a break to spend some time with my partner who has has to put up with me stressing over this on a weekend 😂 but I’ll let you know how it goes in 30 mins. Thanks for the amazing response!

Liam Rourke Over a year ago

It worked! So simple! - I guess this is all just part of the learning process. I was reluctant to make a Stack Overflow account, I didn't think anybody would bother answering, I think you've just created a monster by showing me how useful this website is! Thank you again

Liam Rourke Over a year ago

Okay, how about this one... (I think my brain has turned to mush because it seems like it should be so simple). How do I now change the hamburgerToggle class to color:white when the ul tag is active? The hamburger icon is outside of the ul tag. I'm going to spend hours on this again, aren't I?

Toni Bardina Comas Over a year ago

Since we know ul will be active when navLinkOpen is true, you can just toggle the class depending on the state: <div className={navLinkOpen ? styles.buttonToggleActive : styles.buttonToggle} />

Mina · Accepted Answer · 2022-06-26 12:56:19Z

0

First of all, you shouldn't declare the classes variable with curly brackets.

  const renderClasses = () => {
    let classes = styles.navLinks

    if (navLinkOpen) {
      classes += styles.active
    }

  return classes;
};

answered Jun 26, 2022 at 12:56

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

Declaring a CSS Module Class as a Variable in NextJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related