title: React: Expected an assignment or function call and instead saw an expression in JSX
body: <p>I am trying to create the <a href="https://i.stack.imgur.com/rMFXH.png" rel="nofollow noreferrer">left hand menu</a> for my test application using react.</p>
  <p>I am getting the following compilation error in the JSX of one of my classes.
  Is it because I am not allowed to put html elements within the {} scripts in JSX? If so how can this be changed to make it work?</p>
  <blockquote>
  <p>./src/components/LeftNav.js</p>
  <p>Line 10:  Expected an assignment or function call and instead saw an expression  no-unused-expressions</p>
  <p>Line 12:  Expected an assignment or function call and instead saw an expression  no-unused-expressions</p>
  </blockquote>
  <p>The component I am getting the error in is the following.</p>
  <pre><code>import React, { Component } from 'react';
  
  import LeftNavItem from './LeftNavItem';
  
  class LeftNav extends Component {
      render() {
          return (
              &lt;ul&gt;
                  {this.props.leftNav.map((navItem) =&gt; {
                      &lt;li className=&quot;parent_wrapper&quot;&gt;{navItem.title}&lt;/li&gt;
                      navItem.subMenu.map((subMenuItem) =&gt; {
                          &lt;LeftNavItem key={navItem.id} navItem={navItem.subMenu} /&gt;
                          })
                      })
                  }
              &lt;/ul&gt;
          )
      }
  }
  
  export default LeftNav;
  </code></pre>
  <p>Line 10 is</p>
  <pre><code>&lt;li className=&quot;parent_wrapper&quot;&gt;{navItem.title}&lt;/li&gt;
  </code></pre>
  <p>Line 12 is</p>
  <pre><code>&lt;LeftNavItem key={navItem.id} navItem={navItem.subMenu} /&gt;
  </code></pre>
  <p>The props for this class is</p>
  <pre><code>leftNav: [
        {
          id: 1,
          title: 'System Admin',
          active: false,
          subMenu: [
            {
              id: 2,
              title: '',
              active: false
            },
            {
              id: 3,
              title: '',
              active: false
            },
            {
              id: 4,
              title: '',
              active: false
            },
            {
              id: 5,
              title: '',
              active: false
            },
            {
              id: 6,
              title: '',
              active: false
            },
            {
              id: 7,
              title: '',
              active: false
            },
            {
              id: 8,
              title: '',
              active: false
            },
            {
              id: 9,
              title: '',
              active: false
            }
          ]
        },
        {
          id: 10,
          title: 'Reports',
          active: false,
          subMenu: [
            {
              id: 11,
              title: 'Reports',
              active: false
            },
            {
              id: 12,
              title: 'Dashboard',
              active: true
            },
            {
              id: 13,
              title: 'Templates',
              active: false
            }
          ]
  </code></pre>
  <p>LeftNavItem class is as below</p>
  <pre><code>import React, { Component } from 'react'
  
  export default class LeftNavItem extends Component {
      render() {
          return (
              &lt;li&gt;&lt;a href=&quot;&quot;&gt;{this.props.navItem.title}&lt;/a&gt;&lt;/li&gt;
          )
      }
  }
  </code></pre>
  <p>Thank you!</p>