I have a React button ponent to which I'm adding props like color, text etc.

At the same time I'm also using Bootstrap css.

So I have a button:

<Button text={sometext} color={success} />

Then what I want to do is this in the ponent:

<div className="btn btn-lg btn-{this.props.color}" role="button">{this.props.text}</div>

See the className and {this.props.color} ... this doesn't work.

How can I do this ... add props inside className?

I have a React button ponent to which I'm adding props like color, text etc.

At the same time I'm also using Bootstrap css.

So I have a button:

<Button text={sometext} color={success} />

Then what I want to do is this in the ponent:

<div className="btn btn-lg btn-{this.props.color}" role="button">{this.props.text}</div>

See the className and {this.props.color} ... this doesn't work.

How can I do this ... add props inside className?

• javascript
• reactjs

3 Answers 3

You can use template literals to interpolate variables:

<div className={ `btn btn-lg btn-${this.props.color}` } ...

Before rendering the view set a class variable

const classColor = "btn btn-lg btn-" + this.props.color;

Then render:

<div className={classColor} role="button">{this.props.text}</div>

Alternatively, use join:

<div className={['btn btn-lg btn-', this.props.color].join('')}>...