try_simple_code try_simple_code - 1 month ago 6
React JSX Question

React JS unable to parse span tag

I am working in a project with reactjs. By react code run successfully but unable to parse some tag. My code is

var Item = React.createClass({
render: function () {
var proDiscount;
if(this.props.discount!=0){
proDiscount = '<span>'+this.props.discount+'</span>';
}else{
proDiscount = '';
}
return (
<div className="item">
<div className="tag">{this.props.price} {proDiscount}</div>
</div>
);
}
});


When it render the
<span>
tag unable to parse. The output keep span tag as it is, rest of the output is fine. Where is my problem Thank you.

Answer

It renders the tag, because you're returning a string. This should be the correct code.

var Item = React.createClass({
  render: function() {
    return (
      <div className="item">
        <div className="tag">{this.props.price} {this.props.discount && <span>{this.props.discount}</span>}</div>
      </div>
    );
  }
});
Comments