Shouldn’t multiple root elements become a fragment?

This works for me:

  return html`
    <${React.Fragment}>
      <h1>Quiz</h1>
      ${entriesUi}
      <hr />
      <${Summary} entries=${entries} />
    <//>
  `;

If I don’t wrap the fragment around the roots, I’m getting this error:

Warning: Each child in a list should have a unique “key” prop.

(That is, HTM seems to return an Array and not a fragment.)

If my suggestion doesn’t make sense, then it may be helpful to support the <>...</> syntax for fragments.

[bathos]

This threw me off too. I was expecting createElement(Fragment, {}, ...nodes) treatment for cases like this given the positions will be static and keying is known to be unnecessary up-front.

I’d actually thought that this was one of the main selling-points of htm — that the explicit boundaries of the template obviated the need for explicit fragments within the string content — but it seems I misinterpreted the meaning of the “Multiple root element (fragments)” bullet point in the readme section describing improvements over JSX.

[jimniels]

Was the main issue here that React displayed the questionable warning, or is there a case I’m not aware of where this actually prevents usage?

For me personally, it was that React keeps displaying a warning. Because htm makes multiple root elements so easy, I do it in many components. However, that leads to react throwing lots of warnings in the console, which makes finding things I’ve actually done wrong more difficult.

Best fix at the moment is to either:

• nest every component in a root <div> (less than ideal when semantic structure matters)
• use @rauschma 's suggestion of <${React.Fragment}>

Being able to tersely type <>...</>, as JSX allows, would be a nice enhancement.