Usage in classed/stateful components?

[gotexis]

First of all thanks to the authors greate work, productivity has peaked with this valuable tool.

Now I am having a hard time trying to implement this is in a ES6 classed based components. like

class UserList extends React.Component {

    render() {
        return pug`
            React.Component
                ul
                    each u in this.props.user_list
                        UserItem(key=u.id user=u)
        `
    }
}

Tons of error messages are returning from this code. Is this not supported or am I doing it wrong?

Below errors:

react-dom.development.js:506 Warning: Component(...): No `render` method found on the returned 
react-dom.development.js:14301 Uncaught TypeError: instance.render is not a function

[gotexis]

Fuck me, I can't believe the problem was I wrote React.Component instead of React.Fragment

Holyshit

[ezhlobo]

@gotexis hey ✋, if you wish to use React.Fragment at the root of your render, then I suggest to take a look at this plugin babel-plugin-transform-jsx-classname-components. With it you can simply specify that you want to keep React as an object instead of as a component.

Example of usage in .babelrc:

 {
   "plugins": [
     "transform-react-pug",

+    ["transform-jsx-classname-components", {
+      "objects": ["React"],
+    }],
   ],
 }

[ezhlobo]

@gotexis do you still need any help with that?

[gotexis]

hey! Thanks for he reply. I was already using your solution and it worked like a charm. My drama was that I made a typo of React.Component (which clearly resolved into a huge module in where it shouldn’t be)

Haha

[ezhlobo]

Nice