title: Ternary operator inside render is not behaving correctly -react
body: <p>To be honest I am fairly new to react , I was trying to render list items with selected item class selector based on some condition.</p>
  
  <p>I tried below</p>
  
  <pre><code>class AddEdit extends Component {
      constructor(props) {
          super(props);
          this.state = {
                        sections:[
                                    { name: 'address', label: 'Address', completed:'100',active:true},
                                    { name: 'description', label: 'Description', completed:'100',active:false},
                                    { name: 'sellers', label: 'Sellers', completed:'100',active:false},
                                    { name: 'solicitors', label: 'Solicitors', completed:'100',active:false},
                                    { name: 'listing_details', label: 'Listing Deatils', completed:'100',active:false},
                                    { name: 'library', label: 'Library', completed:'100',active:false},
                                    { name: 'reports', label: 'Reports', completed:'100',active:false}
                                  ]
                      };
      }
  </code></pre>
  
  <p>Then I iterated like below'</p>
  
  <pre><code>render() {
          return (
            &lt;div&gt; 
                           &lt;ul className="component-wrapper-item"&gt;
  
                             {this.state.sections.map(section =&gt;
                                 {section.active ? (
                                                      &lt;li class="component-wrapper-item-selected"&gt;
                                                          &lt;div className='component-item-label-selected'&gt;&amp;nbsp;{section.label}&lt;/div&gt;
                                                       &lt;/li&gt;
                                                      )
                                                    :  (
                                                         &lt;li class="component-wrapper-item"&gt;
                                                             &lt;div className='component-item-label'&gt;{section.label}&lt;/div&gt;
                                                          &lt;/li&gt;
                                                       )
  
                                  }
                             )}
  
                           &lt;/ul&gt;
  
  
                &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>It is not showing the list items after including the above logic, any ideas</p>