Passing in class names to react components

javascript, reactjs

Solution

In React, when you want to pass an interpreted expression, you have to open a pair of curly braces. Try:

render () {
  return (
    <button className={`pill ${ this.props.styleName }`}>
      {this.props.children}
    </button>
  );
}

Using the classnames npm package

import classnames from 'classnames';

render() {
  return (
    <button className={classnames('pill', this.props.styleName)}>
      {this.props.children}
    </button>
  );
}

Problem

I am trying to pass in a classname to a react component to change it's style and cannot seem to get working: ``` class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> ``` I am trying to change the style of the pill by passing in the name of the class that has the respective style. I am new to React so maybe I am not doing this the right way. Thanks

Original source