CODEWITHSUNDEEP
javascriptreactjs
fanjiooJr
fanjiooJr

Reputation: 329

How to add a class to the called component?

I don't know how to add a class to the header component, which I'm calling from another page. I wanted to know how I add that change class, how it looks here

const [change, setChange] = useState("change");

const listenScrollEvent = (e) => {
  if (window.scrollY < 400) {
    return setChange("change");
  } else if (window.scrollY > 400) {
    return setChange("changeColor");
  }
};

useEffect(() => {
  window.addEventListener("scroll", listenScrollEvent);

  return () => {
    window.removeEventListener("scroll", listenScrollEvent);
  };
}, []);

return <Header className={change} />;

Header Code:

export default function Header() {
  return (
    <header className="container header">
      <Logo />
      <Navbar />
    </header>
  );
}

Upvotes: 0

Views: 56

Answers (1)

Camilo
Camilo

Reputation: 7184

You need to accept className as a prop on your Header component.

Something like this:

export default function Header({ className }) {
    return (
        <header className={`container header ${className}`}>
            <Logo />
            <Navbar />
        </header>
    )
}

Upvotes: 1

Related Questions