How to pass state className variable to another component in reaction

Question

I'm not sure if this is the best way to do something, but I want to pass one variable of the class name to another responsive component.

This button starts the onClick animation by simply adding one class name to several elements. Also did I create var = overlay this.state.cliked? 'open': '' to start the overlay, if I have an overlay html on the same component, it works fine, but I have to make the small 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 can see, this is the overlay component that I want to pass to this component, but I'm not sure if it can just be alone and start when this processes the click. Im a little lost with the reaction, not much information on the internet and im new with that.

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, I'm looking for examples on the Internet, but nothing is clear to me :(

Answer 1

Passing class names as strings between components, and even extension class names in the same component, are error prone and not ideal. I would suggest using the classSet () helper: https://facebook.imtqy.com/react/docs/class-name-manipulation.html

In your case, instead of passing the class support to the OverlayView component, you should ideally pass a support that describes the state of the component. In the OverlayView component, compute the correct classes to be applied using the classSet helper.

For example, instead:
<OverlayView className={overlay} />
you can just pass the state variable:
<OverlayView isOpen={this.state.cliked} />

In the OverlayView component, you then create a class 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 2

Use this:

 <div className={`statusbar-button-container ${fondo}`} onClick={this.handleClick}> 

Note. Make the difference between "and". This keyboard character has just been left on tab 1 and above.

Answer 3

I tried this part of your code ...

  return ( <div className={"overlay overlay-slidedown " + this.props.class}> ); 

And that seemed to work fine for me. He solved my problem: skipping interpolation when I want to display it next to some static text.

I find this better than the accepted answer because it solved the problem by parameterizing additional concat'd values ​​when it is often undesirable and against the general philosophy of encapsulation.