How to render a grouped list using react

From the top. Your codepen is not transpiling JSX, so you end up with <div> tags inside your javascript which is causing syntax errors. Additionally, your console.log statements are causing syntax errors, you can't do return(x; y) in Javascript.

Now the actual react component problems are as follows:

• In your constructor you are attempting to bind your renderMethod function to the context of this. But to do that you need to use this.renderMethod otherwise it will look for a variable named renderMethod which doesn't exist.
• You are calling the bind on the result of the function, rather than the function itself. So you are executing the function immediately, returning a react object and trying to bind that. This is fixed by removing the parenthesis calling the function this.renderMethod().bind(this) becomes this.renderMethod.bind(this)
• In your render function, you are wrapping the renderMethod call in JSX style braces, I'm not sure if this works, it may, but it's unecessary to have that or the standard parenthesis (and arguably, even a seperate function call). So return ({this.renderMethod()}) becomes return this.renderMethod();
• The return value of renderMethod is an Array, when it needs to be a single object. Commonly you can wrap this in a simple div to solve the issue. Remember that what you're creating is a SINGLE component, not a list of components, there is never a reason to return an Array.

Now because of the JSX problem stated at the beginning, I couldn't get your page to render, so I remade it in standard React calls. I've added key parameters to get rid of warnings.

class MyComponent extends React.Component{

  constructor (props) {
    super(props);
    this.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 React.createElement('div', {}, groups.map(
      group => elements.filter(element => group.status.includes(element.status)).map((element, index) => (
        React.createElement('div', { key: 'el_' + index }, [
          React.createElement('h1', { key: 'el_h1_' + index }, [element.label]),
          React.createElement('p', { key: 'el_p_' + index }, [element.status])
        ])
      ))
    ));
   }


   render () {
     return this.renderMethod();
   } 
 }

ReactDOM.render(React.createElement(MyComponent), document.getElementById('root'));

And this would be equivalent to something like this in JSX

return (
  <div>
    {groups.map(
      group => elements.filter(element => group.status.includes(element.status)).map((element, index) => (
        <div key={'el_' + index}>
          <h1>{element.label}</h1>
          <p>{element.status}</p>
        </div>
      ))
    )}
  </div>
);

I'm also not going to go into all the Array iteration you're doing there, but suffice to say, you shouldn't be doing that much work inside a render call.

I see there are many things incorrect things in your code:

1. render should return on one element, but in your code you are returning multiple elements

2. return statement shouldn't have console.log. See it as

Incorrect:

return (a + b; console.log(a););

Correct:

console.log(a);
return (a + b);

3. map should return single root element but you are returning multiple elements.

4. elements.filtershould be in {} as it is JS code not JSX.

Corrected Code:

    class MyComponent extends React.Component{

      constructor(props){
        super(props);
        this.renderMethod = this.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 (
          <div>
            {groups.map(group => {
              return(
                <div>
                  <h1>{group.name}</h1>
                  {elements
                    .filter(element => group.status.includes(element.status))
                    .map(element => {
                      return(
                        <div>
                          <h1>{element.label}</h1>
                          <p>{element.status}</p>
                        </div>
                      )
                    })
                  }
                </div>
              )
            })}
          </div>
        );
      }


      render() {
        return (
          <div>{ this.renderMethod() }</div>
        )
      }
    }