Preact: Preact Children Props Array is always empty

[rblin081]

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

[yaodingyd]

Are you sure your issue is legit? The "children" in component render function should not be counted as children in the first place, and that's what react is doing too: link.

React children means the stuff between the opening and closing tags when actually invoking a component, that means the following count as chidlren:

<MyComponent>
    <ComponentOne/>
    <ComponentTwo/>
</MyComponent>

[rblin081]

In React the opening tag is counted as the component and everything thereafter is considered a child.
Please refer to the existing React Docs, specifically the part about the WelcomeDialog.

Anything inside the JSX tag gets passed into the FancyBorder component as a children prop. Since FancyBorder renders {props.children} inside a div, the passed elements appear in the final output.

[yaodingyd]

Yes, that is correct. But in your example, you are rendering child component inside a div, not a component.

[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.

[rblin081]

Peter I replied to 1173 and did not receive a response, leading me to
believe the issue would be ongoing

On Wed, Aug 1, 2018 at 1:38 PM Peter Lenahan [e-mail]
wrote:

Please don’t open duplicates: #1173
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.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/developit/preact/issues/1174#issuecomment-409659084,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKR1ylp3lsgUMovQfbADwyiWPB4hDDW0ks5uMeexgaJpZM4Vqs24
.

[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"] }