title: How to return multiple components in render function?
body: <p>I have made 3 components <code>Batcomponent</code>, <code>Bowlcomponent</code>, <code>Fieldcomponent</code>. I am passing <code>props</code> to each of these components. When the string matches to <code>bat</code> or <code>field</code> or <code>bowl</code> that particular component is rendered and shown on web page. I am returning <code>{renderData}</code> inside <code>return()</code>.</p>
  
  <p>Code:</p>
  
  <pre><code>render(){
  
  if(this.props.type === "bat"){
   renderData = (&lt;Batcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;)
  }else if(this.props.type === "bowl"){
    renderData = (&lt;Bowlcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;)
  }else if(this.props.type === "field"){
      renderData = (&lt;Fieldcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;)
  }
  
  }
  
  return(){
      &lt;div&gt;
         {renderData}
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Now I want to add Piechart component inside <code>renderData</code>.
  What I tried:</p>
  
  <pre><code>render(){
  
  if(this.props.type === "bat"){
   renderData = (&lt;Batcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;
      &lt;Pie prop1 = this.props.type.name /&gt;
      )
  }else if(this.props.type === "bowl"){
    renderData = (&lt;Bowlcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;
      &lt;Pie prop1 = this.props.type.name/&gt;
      )
  }else if(this.props.type === "field"){
      renderData = (&lt;Fieldcomponent 
      prop1 = this.props.type.name
      prop2 = this.props.matches
      prop3 = this.props.email
      /&gt;
      &lt;Pie prop1 = this.props.type.name/&gt;
      )
  }
  
  }
  
  return(){
      &lt;div&gt;
         {renderData}
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Above code does not work how can I add additional components inside <code>renderData</code> ?</p>
  
  <p>If I do <code>renderData = (&lt;FirstComponent /&gt;)</code> it works but if I do like this -> <code>renderData = (&lt;FirstComponent /&gt; &lt;SecondComponent/&gt;)</code> it does not work why ?</p>