title: React JS/JSX if statement in loop
body: <p>I am having issues understanding the React logic. Why is this IF not working? You can assume all classes are there and also the loop is working. Even the condition seem to work but the output on my page is still blank.</p>
  
  <pre><code>    var Feature = React.createClass({
      componentDidMount: function(){
          $('input.rating[type=number]').rating();
          initFeatureInstallReady(this.props.feature.feature_id);
      },
      render: function(){
  
          var backgroundColor = "white";
          var item;
          var props = this.props;
  
          this.props.feature.slides.map(function(slide, i){
  
              if(props.feature.feature_id == "start-home-away" &amp;&amp; slide.slide_id == 'review'){
  
                  item = &lt;div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}&gt;
                              &lt;FeatureReviewHomeAway feature={props.feature} slide={slide} /&gt;
                          &lt;/div&gt;;
  
              }else if(props.feature.feature_id == "start-goto-sleep" &amp;&amp; slide.slide_id == 'review'){
  
                  item = &lt;div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}&gt;
                              &lt;FeatureReviewHomeAway feature={props.feature} slide={slide} /&gt;
                          &lt;/div&gt;;
  
              }else{
  
                  item = &lt;div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}&gt;
                              &lt;FeatureMain_Step feature={props.feature} slide={slide} /&gt;
                          &lt;/div&gt;;
              }
  
          });
  
          return (
              &lt;div className="carousel slide carousel-feature" data-ride="" data-interval="false" id={this.props.feature.feature_id}&gt;
                  &lt;div className="carousel-inner" role="listbox" style={{backgroundColor: backgroundColor}}&gt;
                      {item}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>What am I missing?</p>