Answer a 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?

Answers

<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(" ")}>