title: How to render a grouped list using react
body: <p>I'm trying to render a list based on an array of objects grouped by status as per const elements on snippet bellow. </p>
  
  <p>I'm aware that I could create smaller components here, but I would really like to make my <code>renderMethod</code> works.</p>
  
  <p>The logic is fine as per this jsbin:</p>
  
  <p><a href="https://jsbin.com/cejiziyupa/edit?js,console" rel="nofollow noreferrer">https://jsbin.com/cejiziyupa/edit?js,console</a></p>
  
  <p>I can't figure out what I'm doing about react and JSX. </p>
  
  <p>Any ideas?</p>
  
  <p>Here is my code on codepen - <a href="http://codepen.io/vinicius5581/pen/rjJRvM?editors=0011" rel="nofollow noreferrer">http://codepen.io/vinicius5581/pen/rjJRvM?editors=0011</a></p>
  
  <p>Component:</p>
  
  <pre><code>class MyComponent extends React.Component{
  
    constructor(props){
      super(props)
      renderMethod().bind(this);
    }
  
    renderMethod(){
      const elements = [
        { "id": 1, "label": "element1", "status": "status1"},
        { "id": 2, "label": "element2","status": "status2"},
        {"id": 3, "label": "element3", "status": "status6"},
        { "id": 4, "label": "element3", "status": "status10"}
      ]
  
      const groups = [
        { "name": "group1", "status" : ["status1", "status2", "status3", "status4"] },
        { "name": "group2", "status" : ["status5", "status6", "status7", "status8"] },
        { "name": "group3", "status" : ["status9", "status10"] }
      ]
  
  
      return (
        groups.map((group) =&gt; {
          return(
            console.log(group.name);
            &lt;h1&gt;{group.name}&lt;/h1&gt;
            elements.filter((element) =&gt; group.status.includes(element.status)).map((element) =&gt;{
              return(
                console.log(element.id);
                &lt;div&gt;
                  &lt;h1&gt;{element.label}&lt;/h1&gt;
                  &lt;p&gt;{element.status}&lt;/p&gt;
                &lt;/div&gt;
              )
            })
          )
        })
      )
  
    }
  
  
    render(){
      return(
        {this.renderMethod()}
      )  
    } 
  }
  
  ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>