Rendering props.children without a wrapper

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]

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.

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