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

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><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Clients</a></li>
                        <li><a href="#">Contact</a></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>
)