Express required children proptype

[slorber]

Hi,

I want a component to have at least one required children.
As children can be both a singe element or an array it is not easy (to avoid useless array allocation according to the doc).

I don't know which is the simplest way to do so but come up with this syntax:

        children: React.PropTypes.oneOfType([
            React.PropTypes.component,
            React.PropTypes.arrayOf(React.PropTypes.component)
        ]),

I guess my usecase can be quite common for people building Modals and things like that.
Maybe it would be nice to have a simpler way to express the children is required?

Maybe React.PropTypes.any.isRequired will do the same job? Is there some kind of guarantee that the children prop will never be a different type than component or array(component) ?

[chenglou]

oneOfType(...).isRequired works.
One array allocation here is fair imo. I wouldn't complicate the validation logic by hand-rolling some allocation-free solution.

[slorber]

So you mean React would rather simplify this and always use an array?

@chenglou btw I have troubles with the following:

var UserAction = React.createClass({

    propTypes: {
        userData: React.PropTypes.object.isRequired,
        timestamp: React.PropTypes.number.isRequired,
        children: React.PropTypes.oneOfType([
            React.PropTypes.component,
            React.PropTypes.arrayOf(React.PropTypes.component)
        ]),
        onUserPictureClick: React.PropTypes.func
    },

    render: function() {
        return (
            <div className="userAction">
                <UserPictureWithContent userData={this.props.userData} onUserPictureClick={this.props.onUserPictureClick}>
                    {this.props.children}
                    <TimeAgo timestamp={this.props.timestamp}/>
                </UserPictureWithContent>
            </div>
            );
    }

});

var UserPictureWithContent = React.createClass({

    propTypes: {
        userData: React.PropTypes.object.isRequired,
        children: React.PropTypes.oneOfType([
            React.PropTypes.component,
            React.PropTypes.arrayOf(React.PropTypes.component)
        ]),
        onUserPictureClick: React.PropTypes.func
    },

    render: function() {
        return (
            <div className="userPictureWithContent">
                <UserPicture userData={this.props.userData} onClick={this.props.onUserPictureClick}/>
                <div className="content">{this.props.children}</div>
            </div>
            );
    }

});

The client code is

            <div className="stampleComment">
                <UserAction userData={commentAuthor} timestamp={commentDate}>
                    <div className="stampleCommentAuthor">{commentAuthor.fullname}</div>
                    <StampleCommentContent content={commentContent}/>
                </UserAction>
            </div>

This gives me a strange warning (bu works fine anyway):

Warning: Invalid prop `0` supplied to `UserPictureWithContent`, expected a React component. warning.js:44
Warning: Invalid prop `children` supplied to `UserPictureWithContent`. 

I didn't have any warning until I modify my client code. This client code with only one children does not issue the warning:

            <div className="stampleComment">
                <UserAction userData={commentAuthor} timestamp={commentDate}>
                    <StampleCommentContent content={commentContent}/>
                </UserAction>
            </div>

Any idea?

[chenglou]

PropTypes checks always warn you but let you proceed anyways. It's not a strict type system.

The children warning is precisely that. This:

<div>
  {this.props.children}
  <TimeAgo timestamp={this.props.timestamp}/>
</div>

Is not an array. It's an array whose first item is an array (children), and whose second element is a component. This is the proper one:

children: React.PropTypes.oneOfType([
    React.PropTypes.component,
    React.PropTypes.arrayOf(
      React.PropTypes.oneOfType([
        React.PropTypes.component,
        React.PropTypes.array
      ])
    )
])

But at that point I'd say it's too extreme. children: React.PropTypes.renderable should be fine. Not sure how that 0 warning could happen.

[slorber]

thanks @chenglou I understand now.

Maybe it would make sense for React to simplify all this and to always inject an array of components as children?
Maybe react could flatten the structure in case we have an array of array or something similar

This this may be useful to validate childrens in fail-fast mode.
See #1753
See #1587

[chenglou]

React.Children.map does flatten.

About making child always an array, there's a warning in the docs. It's been extensively discussed in #751 too. I'm for array but I don't think we're reconsidering this anytime soon unfortunately.

Anyways, is this particular issue resolved? Can it be closed?

[slorber]

yes thanks React.PropTypes.renderable is ok for me for now