title: react JSX when to use () and when to use {}
body: <p>I'm really struggling to understand what's wrong with the syntax in the following react function</p>
  <pre><code>    const listItem = (parentId) =&gt; {
              var childCategories = categories.filter(category =&gt; category.ParentId === parentId)
              return (
                  childCategories.map(category =&gt; (
                      &lt;ListItem key={category.Id} button&gt;
                          &lt;ListItemText primary={category.Name} /&gt;
                      &lt;/ListItem&gt;
                      listItem(category.Id) //// it doesn't like this line
                  ))
              )
          }
  </code></pre>
  <p>if I take out the line with the comment &quot;//// it doesn't like this line&quot; the function works except of course there is no recursion. I've tried all different combinations of {} and() e.g. {listItem(category.Id)} but it still doesn't work. Any idea what's wrong with the syntax.</p>