How can I add multiple className's to react component?

Question

I need to add one className to a component which is being passed down from the parent, and another className that doesn't have anything to do with its parent, but with the component itself.

example

<div className={this.state.className} className={this.props.content.divClassName}>       <div className={this.props.content.containerClassName}>       <div className="row">       <div className="col-sm-6 col-sm-offset-6">         <p>{this.props.content.subTitle}</p>         <h1 className={this.props.content.titleClassName}>{this.props.content.headerText}</h1>         <p className={this.props.content.subTitleClassName}>{this.props.content.paragraph}</p>         <p>{this.props.content.quote}</p>         <Button showMe={this.props.content.showButton} buttonText={this.props.content.buttonText} />       </div>       </div>       </div>     </div> 

When I try this, neither class is applied, I can do one or the other or not both. How do I achieve this?

Answer 1

<div className={`${this.state.className} ${this.props.content.divClassName}`}> 

Or if you can't use template strings:

<div className={[this.state.className, this.props.content.divClassName].join(" ")}> 

Answer 2

Using template literals (Template strings),

Combo of string and props class is here

className={`${props.myClass} MyStringClass`}