title: Multiple function calls inside curly braces in React JSX
body: <p>I have multiple methods which render React components. I have put them inside methods to avoid calling components at multiple places with all the props. They are also being passed to another component. </p>
  
  <pre><code>renderComponentAbc = () =&gt; &lt;Abc prop1={} prop2={} prop3={}/&gt;;
  renderComponentDef = () =&gt; &lt;Def prop1={} prop2={} prop3={}/&gt;;
  renderComponentXyz = () =&gt; &lt;Xyz prop1={} prop2={} prop3={}/&gt;; 
  </code></pre>
  
  <p>I want to render these one besides another in a component, so I tried this:</p>
  
  <pre><code>// Inside render method
  &lt;div&gt;
  {
      props.renderComponentAbc();
      props.renderComponentDef();
      props.renderComponentXyz(); 
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>But above code throws error <code>Syntax error: Unexpected token, expected }</code>.
  Is this not possible without wrapping each function call in a <code>{}</code>? 
  Removing <code>;</code> after function invocation doesn't help. Is it that <code>{}</code> can only evaluate one expression?</p>