title: How to use the condition map function in ReactJS?
body: <p>I am trying to display bootstrap carousel via ajax call using react js. Ajax receives json data consisting image name, content title and some meta information of per slide what I want to inject in DOM. So, I use the <code>map</code> function to generate all slides. My problem is, for the first slide I want to add a class <code>active</code>. But I do not know how to use condition in <code>map()</code>. </p>
  
  <p>In React, I have written: (in <code>SliderWidget</code> class, I have written a comment actually where I should use <code>active</code> class conditionally)</p>
  
  <pre><code>var HomeCarousel = React.createClass({
  
  getInitialState: function() {
      return {
          data: []
      }
  },
  
  
  componentDidMount: function() {
      $.get("/api/slider", function(result) {
  
          this.setState({
              data: result
          });
      }.bind(this));
  },
  
  
  render: function() {
  
      return (
          &lt;div id={"myCarousel"} className={"carousel slide"} data-ride="carousel"&gt;
  
              {this.state.data.map((slider, i) =&gt; &lt;SliderWidget key = {i} data = {slider} /&gt;)}
          &lt;/div&gt;
      );
  }
  
  });
  
  
  class SliderWidget extends React.Component {
  render() {
      return (
  
          &lt;div className={"item active"}&gt; // here I want to use active class for the first slide
              &lt;img className={"first-slide"} src="images/pexels.jpeg" alt="First slide" /&gt;
              &lt;div className={"container"}&gt;
                  &lt;div className={"carousel-caption"}&gt;
                      &lt;h3&gt;Research Indicates Breakfast is the Most Important Meal&lt;/h3&gt;
                      &lt;p&gt;&lt;a className={"btn btn-primary"} href="#" role="button"&gt;Find Out More&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      );
  }
  }
  
  ReactDOM.render(
      &lt;HomeCarousel /&gt;, document.getElementById('react-home-carousel')
  );
  </code></pre>