javascript - Render JSX element based on condition -

so have simple component within web app have been working on , wondering if there way render element within component based on value of this.props.item.

here jsx:

var react = require("react"); var actions = require("../actions/schoolactions");  module.exports = react.createclass({     deleteschool: function(e){         e.preventdefault();         actions.deleteschool(this.props.info);     },     render:function(){         return(             <div classname="panel panel-default">                 <div classname="panel-heading">                     {this.props.info.name}                     <span classname="pull-right text-uppercase delete-button" onclick={this.deleteschool}>&times;</span>                 </div>                 <div classname="panel-body">{this.props.info.tagline}</div>             </div>         )     } }) 

i wanted able this:

   render:function(){         return(   code blah blah...  if (this.props.info = "nothing"){     <div classname="panel-body">{this.props.info.tagline}</div>      }    ...code blah blah 

but cannot write javascript withing render function itself. know how this? or advice appreciated, thank in advance.

you can use conditionally render using if , return appropriate jsx

render(){     if(something){        return(<myjsx1/>)     }else{        return(<myjsx2/>)     } } 

you can chaage component to:

       render:function(){             return(                 <div classname="panel panel-default">                     <div classname="panel-heading">                         {this.props.info.name}                         <span classname="pull-right text-uppercase delete-button" onclick={this.deleteschool}>&times;</span>                     </div>                    {this.props.info = "nothing"?                    (<div classname="panel-body">{this.props.info.tagline}</div>)                    :null}                  </div>             )         } }) 

https://facebook.github.io/react/docs/conditional-rendering.html