Passing class name down from one component to another in React

Question

I have two files, header.js and toggle.js. I'm trying to change the class name of one of the elements in the parent component.

How can I add the active class to my <ul className="nav-wrapper"> when the button is clicked?

Here's my code:

header.js

const Header = ({ siteTitle, menuLinks,  }) => (
<header className="site-header">
    <div className="site-header-wrapper wrapper">
      <div className="site-header-logo">
        <Link to="/" className="brand">Brand Logo</Link>
      </div>
      <div className="site-header-right">
        <nav className="nav">
          <Toggle />
          <ul className="nav-wrapper">
            {menuLinks.map(link => (
              <li 
              key={link.name}
              className="nav-item"
              >
              <Link to={link.link}>
                {link.name}
              </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>

    </div>
  </header>

)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

toggle.js

  export default function Toggle() {
  const [isActive, setActive] = useState("false");

  const handleToggle = () => {
    setActive(!isActive);
  };

  return (
    <button 
    className="nav-toggle" 
    className={isActive ? "app" : null} 
    onClick={handleToggle}
    aria-expanded="false" 
    type="button">
        MENU
    </button>
  );
}

Thanks for any help!

jean182 · Accepted Answer · 2021-01-14 23:14:46Z

1

Easiest way will be refactoring your code to have the useState in the Header component and then passing that state to your Toggle component as props. This will make the isActive prop available in the header so you can do something like this:

const Header = ({ siteTitle, menuLinks,  }) => {
 const [isActiveNav, setActiveNav] = useState(false);
 const activeClass  = isActiveNav ? 'active' : ''

 return (

  // All your jsx
  <Toggle isActive={isActiveNav} setActive={setActiveNav}  />
  <ul className={`nav-wrapper ${activeClass}`}>
    {// More JSX}
  </ul>
 )

Now in your Toggle component

  export default function Toggle({ isActive, setActive }) {

   const handleToggle = () => {
    setActive(!isActive);
   };

   return (
    <button 
     className="nav-toggle" 
     className={isActive ? "app" : ''} 
     onClick={handleToggle}
     aria-expanded={isActive}
     type="button">
     MENU
    </button>
   );
  }

I did some changes in your code:

Don't use null as a className, use an empty string instead
The useState value should be false not "false".
You can pass the isActive value to the aria-expanded prop.

This will do the trick, and is the easiest approach.

answered Jan 14, 2021 at 23:14

jean182

3,5332 gold badges21 silver badges32 bronze badges

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

3 Comments

Trey Copeland Over a year ago

thanks. i keep getting 10:3 error Expected an assignment or function call and instead saw an expression no-unused-expressions after implementing your code

Trey Copeland Over a year ago

in /src/components/header.js

Trey Copeland Over a year ago

found the issue. i didn't have the return() in my header.js

Collectives™ on Stack Overflow

Passing class name down from one component to another in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related