How to provide dynamic className to element in React Class render method

Question

I have a ReactClass with name Alert. Its render method returns a div with class alert alert-success or alert alert-error according to the type passed while creating element. I just want to know how to add class based on the type of alert element.

Here is my attempt:

var Alert = ReactClass({
  render: function() {
    return <div className="alert {this.props.type}">{this.props.message}</div>
  }
});

var successAlert = React.createElement(Alert, {
  type: 'alert-success'
  message: 'Information saved successfully!!'
});

When JSX Template is compiled this.props.type is not converted to the class passed to element. How to achieve this ?

Answer 1

Looks like I have found answer to my question. We can simply do something like this:

var Alert = ReactClass({
  render: function() {
    return <div className={"alert " + this.props.type}>{this.props.message}</div>
  }
});

Just put your classes inside Template evaluators { } in this case. Create your class string based on your props and states.

Hope this is helpful to others.

Answer 2

One way to accomplish this is to have a string which will contain all of your classes and then set it to the Component's className:

var Alert = ReactClass({

  var yourClassName = 'alert ';

  // Add any additional class names
  yourClassName += this.props.type + ' ';

  render: function() {
    return <div className={yourClassName}>{this.props.message}</div>
  }
});

or alternatively you can store your class names in an array and convert it to a class friendly string when you're ready to use it:

var Alert = ReactClass({

  var yourClassArray = [];

  // Add any additional class names
  yourClassArray.push('alert');
  yourClassArray.push(this.props.type);

  var classString = yourClassArray.join(' ');

  render: function() {
    return <div className={classString}>{this.props.message}</div>
  }
});