title: Building a table in react
body: <p>I'm trying to build a simple table using React and running into a small issue. </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div&gt;  
    &lt;table&gt;
      &lt;tbody id="content"&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt; 
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then my React module:</p>
  
  <pre><code>var FriendsContainer = React.createClass({
      getInitialState: function(){
          return {
              data: [
                  {'name':'Lorem Ipsum', 'email':'email1@gmail.com'}, 
                  {'name':'Caveat Broader', 'email':'email2@gmail.com'},
                  {'name':'Runther Brigsby', 'email':'email3@gmail.com'}
              ]
          }
      },
  
      render: function(){
          var listItems = this.state.data.map(function(person) {
              return(
                  &lt;tr&gt;
                      &lt;td&gt;{person['name']}&lt;/td&gt;
                      &lt;td&gt;{person['email']}&lt;/td&gt;
                  &lt;/tr&gt;
              )
          });
          return (
              {listItems}
          )
      }
  });
  </code></pre>
  
  <p>I keep getting the error <code>Error: FriendsContainer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.</code></p>
  
  <p>What am I doing wrong?</p>