Can't get children to pass properly. about htm

[Industrial]

It is solved by const X = ({ children }) => children[0]. Why can't it be an array, though?

[Industrial]

I'm running into many problems with libraries. Right now with Material UI.

example: Warning: Failed prop type: Invalid prop childrensupplied toGrid, expected a ReactNode. in Grid

[Industrial]

I tried http://recharts.org/en-US/ as an example and

  <${LineChart} width=${500} height=${300} data=${[0, 1, 2, 3, 4, 5, 4, 3, 4, 5, 4, 3, 2, 1, 0]}>
    <${XAxis} dataKey="name" />
    <${YAxis} />
    <${CartesianGrid} stroke="#eee" strokeDasharray="5 5" />
    <${Line} type="monotone" dataKey="uv" stroke="#8884d8" />
    <${Line} type="monotone" dataKey="pv" stroke="#82ca9d" />
  <//>

gives me

Uncaught Error: Objects are not valid as a React child (found: object with keys {nodeName, children, attributes, key}). If you meant to render a collection of children, use an array instead.

[developit]

@Industrial are you using Preact, or React? AFAIK Material-UI has issues with the current version of Preact, independent of HTM.

[Industrial]

That was with Preact, yeah.

[kilianc]

@developit I am getting the same error with React 16.7.0 and a basic hello world.

Objects are not valid as a React child (found: object with keys {type, props, children}). If you meant to render a collection of children, use an array instead.

import React from 'react'
import ReactDom from 'react-dom'

console.log(React.version)

function h (type, props, ...children) {
  return { type, props, children }
}

const html = htm.bind(h)

const HelloWorld = () => html`<h1>HI</h1>`
ReactDom.render(html`<${HelloWorld} />`, document.getElementById('main'))

---

Edit: I was missing the correct binding with createElement

const html = htm.bind(React.createElement)

[developit]

@kilianc with the binding corrected, can we close this issue?

@Industrial the current version of Preact does not support returning multiple roots from a component render, which is what returning props.children (an Array) would be. This is implemented in the upcoming Preact X, as it is backed by the same logic used for Fragments.

If you're just looking to use HTM with React, don't use the Preact version. Use this:

// htm-react.js
import htm from 'htm';
import { createElement, cloneElement, render } from 'react';

export const html = htm.bind(createElement);
export { h: createElement, cloneElement, render };

.. then use it within your project:

import { html, render } from './htm-react.js';

const App = ({ children }) => children;
render(html`<${App}>Hello World<//>`, document.body);

[developit]

Closing since this seems like a duplicate of a bunch of Preact fragments related issues, but feel free to re-open if I'm missing something!