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

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.

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

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.