Accesing objects inside a function. - React JS with JSX Syntax

JavaScript
1

Hello Friends,

Just a quick question I’m working on a react js app. I want to structure my code into functions. I have an object with styles and these styles have been Destructuring for a better read in the components. so far it works!, but I want is to keep this object in a function and access my object styles within the function, and have my code in functions is there’s a way of doing this ? I just want to clean code I don’t want to leave my objects globally.

// Destructuring Objects -- i want to make this object in a function, and access my objects and have them in the JSX 
const myStyles = {
    menuStyle: "fixed bg-white top-0 left-0 w-4/5 h-full z-50 shadow",
    fontIcon: "text-xl cursor-pointer",
    blackTrans: "bg-black-t-50 fixed top-0 left-0 w-full h-full z-50"
  };
  const {menuStyle, fontIcon, blackTrans} = myStyles;

// This is the code jsx that will show in my components that will make the styles short that is why I'm using Destructuring.
let menu;
let menuMask;

  if(showMenu){
    menu = <div className={menuStyle}>The Menu</div>;
    menuMask = <div className={blackTrans} onClick={closeMenu}></div>
  }

return (
    <nav>
      <FontAwesomeIcon className={fontIcon} icon={faBars} onClick={openMenu}/>
      {menuMask}
      {menu}
    </nav>
  )
2

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