ReactJS CSS module for className

JavaScript
1

I wanted to create a navbar , and i had all the data for the navbar such as title , and className in a seperate file , i also using CSS module for styling my navbar then import these styles using “classes” object in my component as below

import classes from "./Navbar.module.css";

how my template literal will look like keep in my in my data i defined the class as a string , but in the component it suppose to be like classes.classname

below is my data

export const MenuItems = [
  { title: "Home", path: "#", cName: "navLinks" },
  { title: "Services", path: "#", cName: "navLinks" },
  { title: "Contact Us", path: "#", cName: "navLinks" },
  { title: "Sign Up", path: "#", cName: "navLinksMobile" },
];

and her is my mapped data for my navbar

{MenuItems.map((item, index) => {
          return (
            <li key={index}>
              <a className={item.cName} href={item.path}>
                {item.title}
              </a>
            </li>
          );
        })}
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.