title: Return multiple React elements in a method without a wrapper element
body: <p>I'm trying to return multiple React elements from a helper method. I could solve it simply by moving around some code, but I'm wondering if there's a cleaner way to solve it. I have a method that returns part of the <code>render</code> method, and that functions needs to return both a React element and some text. It's clearer through an example:</p>
  
  <pre><code>class Foo extends React.Component {
    _renderAuthor() {
      if (!this.props.author) {
        return null;
      }
  
      return [
        ' by ',
        &lt;a href={getAuthorUrl(this.props.author)}&gt;{this.props.author}&lt;/a&gt;,
      ]; // Triggers warning: Each child in an array or iterator should have a unique "key" prop.
  
    render() {
      return (
        &lt;div&gt;
          {this.props.title}
          {this._renderAuthor()}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I know the <code>render</code> method has to return exactly 1 React element. Using a helper method like this would trigger a warning, and fixing the warning (by adding keys) would make the code too convoluted. Is there a clean way to do this without triggering a warning?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Another use case:</p>
  
  <pre><code>render() {
    return (
      &lt;div&gt;
        {user
          ? &lt;h2&gt;{user.name}&lt;/h2&gt;
            &lt;p&gt;{user.info}&lt;/p&gt;
          : &lt;p&gt;User not found&lt;/p&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Turns out this isn't possible yet, I wrote about 2 workarounds here: <a href="https://www.wptutor.io/web/js/react-multiple-elements-without-wrapper" rel="noreferrer">https://www.wptutor.io/web/js/react-multiple-elements-without-wrapper</a></p>