title: React Conditional Rendering with states
body: <p>I am working in a component where if i click on the <code>NavItem</code> i render an other list of elements</p>
  
  <p>Function changing the state</p>
  
  <pre><code>handleClick() {
    this.setState({
      isActive: !this.state.isActive
    });
  };
  </code></pre>
  
  <p>The Conditional Rendering</p>
  
  <pre><code>if (isActive) {
    SubList = &lt;List hasIcons style="secondary"&gt;&lt;ListItem&gt;&lt;NavItem href={desktopUrl} title={title}&gt;&lt;Icon name={name} /&gt;{title}&lt;/NavItem&gt;&lt;/ListItem&gt;&lt;/List&gt;
  }
  </code></pre>
  
  <p>The List NavItem and the <code>{{SubList}}</code></p>
  
  <pre><code>&lt;ListItem&gt;
      &lt;NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}&gt;
          &lt;Icon name={name} /&gt;
          {title}
      &lt;/NavItem&gt;
      {SubList}
  &lt;/ListItem&gt;
  </code></pre>
  
  <p>Here the whole component</p>
  
  <pre><code>export default class SportNavItem extends React.Component {
    constructor() {
      super();
      this.state = { isActive: false };
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState({
        isActive: !this.state.isActive
      });
    }
  
    render() {
      const { title, desktopUrl, isActive, name } = this.props.data;
      // props.childItems; { title, name, isActive, url }
  
      // const itemId = `nav-${slugEn}`;
      const style = isActive ? "primary" : "default";
  
      let SubList = null;
  
      if (isActive) {
        SubList = (
          &lt;List hasIcons style="secondary"&gt;
            &lt;ListItem&gt;
              &lt;NavItem isActive href={desktopUrl} title={title}&gt;
                &lt;Icon name={name} /&gt;
                {title}
              &lt;/NavItem&gt;
            &lt;/ListItem&gt;
          &lt;/List&gt;
        );
      }
  
      return (
        &lt;List hasIcons style={style}&gt;
          &lt;ListItem&gt;
            &lt;NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}&gt;
              &lt;Icon name={name} /&gt;
              {title}
            &lt;/NavItem&gt;
            {SubList}
          &lt;/ListItem&gt;
        &lt;/List&gt;
      );
    }
  }
  </code></pre>
  
  <p>The Component exported</p>
  
  <pre><code>const sampleData = {
    title: 'Football',
    name: 'football',
    isActive: true,
    desktopUrl: '#'
  }
  
  ReactDOM.render(
      &lt;div&gt;
          &lt;SportNavItem data = { sampleData }/&gt;
      &lt;/div&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>If i manually change the status <code>isActive</code> to <code>false</code> i can render the <code>SubList</code>. I can not achieve to handle the status <code>onClick</code> and i do not see error in the console. What is possibly wrong? Is there a better way?</p>