How to pass a state className variable to another component in react - reactjs

Question

I'm not sure if this is the best way to do things but i want to pass one class name variable to another component in react.
This is a button which launch an animation onClick just adding one className to few elements of it. Also i created the var = overlay this.state.cliked ? 'open' : '' to launch an overlay, if i have the overlay html on the same component it works fine but i have to do little components as i can.
var React = require('react');
var OverlayView = require('./OverlayView.jsx');
var StatusBarButtonView = React.createClass({
getInitialState: function() {
return {cliked: false};
},
handleClick: function(event) {
this.setState({cliked: !this.state.cliked});
},
render: function() {
var fondo = this.state.cliked ? 'active' : '';
var overlay = this.state.cliked ? 'open' : '';
return (
<div>
<div className={"statusbar-button-container " + (fondo)} onClick={this.handleClick}>
<img src="images/navbar-element-icon-cross.png" className={"rotate " + (fondo)}/>
</div>
</div>
<OverlayView className={overlay} />
);
}
});
module.exports = StatusBarButtonView;
As you see the is the component of the overlay i want to pass to this component but im not sure if it can just be alone and be launched when this one handle the click. im a bit lost with react, not so much online info and im new with this.
This is the Overlay component:
var React = require('react');
var OverlayView = React.createClass({
return (
<div className={"overlay overlay-slidedown " + this.props.class}>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
);
}
});
module.exports = OverlayView;
I'm not sure how to do this, im looking for examples around the web but nothing very clear for me :(

Answer 1

Use this:
<div className={`statusbar-button-container ${fondo}`} onClick={this.handleClick}>
Note: Make difference between ' and ` (known as backticks). This sign on keyboard is just left to 1 and above tab.

Answer 2

Passing class names as strings between components and even appending class names in the same component is error-prone and not ideal. I'd suggest using the classSet() helper: https://facebook.github.io/react/docs/class-name-manipulation.html
In your case, instead of passing a class prop to the OverlayView component, you should ideally pass a prop that describes the state of the component. Within the OverlayView component, compute the correct classes to be applied using the classSet helper.
For example, instead of using this:
<OverlayView className={overlay} />
you could simply pass in the state variable:
<OverlayView isOpen={this.state.cliked} />
In your OverlayView component, you would then create a classes object using the className helper:
var classes = cx({
'overlay': true,
'overlay-slidedown': true,
'open': this.props.isOpen
});
And change the line in your render() function to use the classes object:
...
<div className={classes}>
...

Answer 3

I tried this part of your code...
return (
<div className={"overlay overlay-slidedown " + this.props.class}>
);
And it seemed to work perfectly for me. It solved my problem: a prop failing to interpolate when I want to display it next to some static text.
I find this better than the accepted answer, because that solved the problem by parameterizing the extra concat'd values, when this is often not desired and against general encapsulation philosophy.

Answer 4

I find it much neater to place the classes in an array, and then reference that:
const styles = [
"container",
"px-4",
"h-1/3",
this.props.class
]
return (
<div className={styles.join(" ")}>
Hello!
</div>
)