CODEWITHSUNDEEP
javascriptreactjs
Iftakharul Alam
Iftakharul Alam

Reputation: 3321

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.

Upvotes: 0

Views: 87

Answers (1)

user6812877
user6812877

Reputation:

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>
    );
  }
});

Upvotes: 2

Related Questions