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 :(

Neil · Accepted Answer · 2018-09-10 11:46:46Z

71

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.

edited Sep 10, 2018 at 11:46

Neil

8,1604 gold badges58 silver badges78 bronze badges

answered Nov 5, 2017 at 18:19

Admir

3,1462 gold badges22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

subeeshb · Accepted Answer · 2015-04-24 09:17:28Z

18

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

edited Apr 24, 2015 at 9:17

answered Apr 24, 2015 at 8:30

subeeshb

4764 silver badges10 bronze badges

5 Comments

Fraccier Over a year ago

Thanks, the problem is that i dont understand the example of classSet of react tutorial because it looks incomplete, i see the classes but i dont see how that classes are applied. I need a working example or something more clear to understand it. Can you give an example??

subeeshb Over a year ago

Updated my answer to include an example.

Fraccier Over a year ago

You are right, at the moment i did the classSet (classnames) to do the class toggle and it works fine. Now i have to try the pass the state prop to the overlay.

Fraccier Over a year ago

Works perfectly and i learned out how to do more stuff with react, This is awesome!! thank you very much @subeeshb

subeeshb Over a year ago

Glad to have helped :)

HoldOffHunger · Accepted Answer · 2017-07-24 18:52:38Z

9

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.

answered Jul 24, 2017 at 18:52

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

Comments

Brad Axe · Accepted Answer · 2020-09-18 22:48:41Z

1

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

answered Sep 18, 2020 at 22:48

Brad Axe

8157 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related