Preact: Rendering props.children without a wrapper

[nightwolfz]

First of all, great job on Preact !

I noticed the following behavior being inconsistent with react unless there's a preact way of doing it.

It would be nice if we didn't need to wrap props.children with extra div's

Example:

import { h, render, Component } from 'preact';

class TestNotOK extends Component {
    render() {
        return <h1 style="position:absolute; top:0; left:0">Doh! Test No worky!</h1>
    }
}
class TestOK extends Component {
    render() {
        return <h1 style="position:absolute; top:20px; left:0">Doh! Test OK now!</h1>
    }
}

class ProviderNotOK extends Component {
    render() {
        return this.props.children
    }
}

class ProviderOK extends Component {
    render() {
        return <div>{this.props.children}</div>
    }
}

// This does not work
render(<ProviderNotOK>
    <TestNotOK/>
</ProviderNotOK>, document.body);

// This works
render(<ProviderOK>
    <TestOK/>
</ProviderOK>, document.body);

[developit]

Hi @nightwolfz,

Just return props.children[0], no wrapper should be required. In preact, children is _always_ an Array. This avoids needing to build an API for managing an abstract "maybe array" type. preact-compat does include the React.Children for abstracting this if you need them to look identical.

Here's your code with the added [0] working:
https://jsfiddle.net/developit/jqd96rhv/

Cheers!

[nightwolfz]

Thanks @developit

That works if you know that you will only have one child.

Is it possible to return an array of children from the render method without wrapping?

https://jsfiddle.net/cfvcrr7d/1/

[developit]

No, sorry :( - Neither React nor Preact support that. It has to do with tracking DOM Node ownership. I have a few thoughts around how it might be possible to implement, but they are all pretty bloated sadly. In my own work, the couple times I've wanted to do this I actually use a function instead of a component. Since a lot of my components are just pure functions that take props and return JSX, it's as simple as swapping out <Foo /> for {Foo()}:

const ITEMS = [1, 2, 3, 4, 5];

const List = () => (
  <div>
    <h1>list of things:</h1>
    <ul>
      { ListItems() }
    </ul>
  </div>
);

const ListItems = () => (
  ITEMS.map( item => <li>{ item }</li> )
);

on jsfiddle

[nightwolfz]

You're right, I incorrectly assumed that React always returns children as an array as well but this seems not to be the case.

[NekR]

@developit sad thing :-) Would be great to get "returning arrays" support.

[treshugart]

@developit I think Fiber is going to support this. Have you had any thoughts on this since your last reply? We've supported this in the past in Skate and it was quite convenient.

[developit]

I don't personally have a use for it, but I'm assuming it's a feature Preact will need to support. It doesn't fit well into the current model, but that's something I'm already changing.

[kurtextrem]

Is there anything new? Does 8.2.1 support it?

[developit]

There is an experimental PR: #703.

[yaitskov]

You saved space on a Maybe class definition, which is fixed saving, but every component must have extra 3 letters.