title: React unexpected token { } when trying to loop inside render
body: <p>I was following the example on the react website on how to loop inside <code>render</code> I've got what I wanted to accomplish done, but I have</p>
  
  <pre><code>var AdminForumContainer = React.createClass({
      getInitialState: function() {
          return { containers: [] }
      },
      componentDidMount: function() {
          $.ajax({
              method: 'GET',
              url: '/admin/manage/forum/populate',
              success: function(data) {
                  console.log(data);
              }
          })  
      },
      render: function() {
          return (
              {this.state.containers.map(function(container) {
                  return (
                      &lt;table className="containers"&gt;
                      &lt;caption&gt;{container.containername}&lt;/caption&gt;
                      &lt;thead className="containerTitle"&gt;
                          &lt;tr&gt;
                              &lt;td colspan="2"&gt;Main Threads&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Thread Name&lt;/td&gt;
                              &lt;td&gt;Delete&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {
                              container.mainthreads.map(function(mainthread) {
                                  return (
                                  &lt;tr&gt;
                                      &lt;td&gt;{mainthread.threadname}&lt;/td&gt;
                                      &lt;td&gt;&lt;button className="button alert"&gt;Delete&lt;/button&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                                  )
                              })
                          }
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;button className="button" onclick={this.createMainThread(container.containerid)}&gt;Create&lt;/button&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td colspan="2"&gt;Sub Threads&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {
                              container.mainthreads.map(function(subthread) {
                                  return (&lt;tr&gt;
                                      &lt;td&gt;{subthread.threadname}&lt;/td&gt;
                                      &lt;td&gt;&lt;button className="button alert"&gt;Delete&lt;/button&gt;&lt;/td&gt;
                                  &lt;/tr&gt;)
                              })
                          }
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;button className="button" onclick={this.createSubThread(container.containerid)}&gt;Create&lt;/button&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  )
              })}
          )
      }
  });
  </code></pre>
  
  <p>but I get </p>
  
  <pre><code>Uncaught SyntaxError: http://localhost:8080/static/js/admin.jsx: Unexpected token (16:8)
    14 |  render: function() {
    15 |      return (
  &gt; 16 |          {this.state.containers.map(function(container) {
       |         ^
    17 |  
    18 |              &lt;table className="containers"&gt;
    19 |                  &lt;caption&gt;{container.containername}&lt;/caption&gt;
  </code></pre>
  
  <p>not sure what is wrong here. Thanks.</p>