Preact Children Props Array is always empty

Preact doesn’t count children returned from a component’s render function as children for example

render(props, state) { return(<div><ComponentOne/><ComponentTwo/></div>); }

will always have props.children = []

This is inconsistent behavior from React where the children props absolutely are counted. Also before you close this issue as a non-bug, please give guidance on how to properly get props.children to show the correct information

[developit]

What is the correct way to access children from a component?

class Foo extends Component {
  render(props) {
    props.children  // [<span />, "hello"]
    return h('div', { id: 'foo' }, props.children);
  }
}

render(<Foo><span />hello</Foo>);

props.children is always an Array containing the JSX elements and text values passed as children to a given component. It’s normalized: h('div', { children: 'one' }).children === ['one']

We may consider moving towards React’s behavior (no normalization whatsoever) in future versions, but it would be a fairly major breaking change and would require shipping the entire Children interface (likely 500b on its own).

---

Note: I found both your examples confusing - you’re returning children from a render function, not passing children to a render function:

<Foo><span />hello</Foo>
// roughly translates to:  new Foo().render({ children: [<span />, 'hello'] })

class Foo {
  render(props) {
    // props here are the props passed to <Foo>, which means
    // props.children here has nothing to do with the return value of this function.

    return <OtherComponent>hello</OtherComponent>
                         // ^^^ OtherComponent.render() will receive { children: ["hello"] }

[pl12133]

Please don’t open duplicates: https://github.com/developit/preact/issues/1173

If you create a running code sample to demonstrate the differences between React and Preact it might be easier to understand your question.