title: React is rendering [Object object] instead of JSX elements inside the array
body: <p>I have this array of buttons in my React application:</p>
  
  <pre><code>const buttons = [    
  &lt;Button label='Close' onClick={props.handleClose} /&gt;,
  &lt;Button label='Save' onClick={props.handleSubmit} /&gt;,
  &lt;Button label='Reset' onClick={props.handleReset} /&gt;
  ]
  </code></pre>
  
  <p>But when I render them:</p>
  
  <pre><code>render() {
      return (
          &lt;div className='buttons'&gt;{buttons.join()}&lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>I get:  </p>
  
  <pre><code> Object object Object object Object object
  </code></pre>
  
  <p>And I want to get those elements.</p>