score:16

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

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

score:8

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.

score:44

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