Passing Down A Classname To A Child Component When Called From Another

I am trying to add a className to a child component of layouts/index.js in React with Gatsby. How can I pass the className in props to be used with the component when the onClick i

Solution 1:

The reason it works on a div and not on your Menu component is that when you pass it to a div it adds that class "directly" to the div HTML element but when you pass it to your component it just passes it as a prop. It really depends on what you do inside the render method of the Menu component and what you return from it. If you make sure to grab that prop and attach it to whatever it renders it will work just as it did on a div.

eg:

classMenuextendsComponent {

render () {
  return (
    <divclassName={this.props.className}><p> Menu Component </p></div>
   )
 }
}