Wrap with <React.Fragment>, if templates returns multiple elements

[yuheiy]

source:

import React from "react";

class MyComponent extends React.Component {
  render() {
    return pug`
      div foo
      | bar
      div baz
    `;
  }
}

compile to:

import React from "react";

class MyComponent extends React.Component {
  render() {
    return React.createElement(
      React.Fragment,
      null,
      React.createElement(
        "div",
        null,
        "foo"
      ),
      "bar",
      React.createElement(
        "div",
        null,
        "baz"
      )
    );
  }
}

[yuheiy]

We can write like this:

import React from "react";

class MyComponent extends React.Component {
  render() {
    return pug`
      React.Fragment
        div foo
        | bar
        div baz
    `;
  }
}

I thought that should not be implicitly wrapped with <React.Fragment>. Sorry.

[ForbesLindesay]

We should do this automatically for people.

[pjungwir]

@yuheiy have you tested your suggestion? I get this error, because of the period:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

(See this similar issue with haml-jsx-loader.)

I don't mind wrapping everything in React.Fragment by hand, but of course only if it works. :-)

This does work for me:

return <React.Fragment>
  {pug`
    .fixed-toolbar hi
    .container.under-toolbar
  `}
</React.Fragment>;

But then I get a loud warning with a stack trace:

Warning: Each child in an array or iterator should have a unique "key" prop.

[ForbesLindesay]

Yes, this doesn't currently work, and we should just swap from returning an array to returning a React Fragment.

[ezhlobo]

I'm reopening this issue until we bump new version.

[ForbesLindesay]

Released as 6.0.0