Accepted answer

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:

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}>


I find it much neater to place the classes in an array, and then reference that:

const styles = [
return (
    <div className={styles.join(" ")}>


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.


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.

Related Query

More Query from same tag