Search code examples
javascriptreactjsellipsis

Does React property spread notation also pass on children?


Does the React property spread notation in this return statement...

render() {
    return (
        <Alert {...this.props}</Alert>
    );
}

... also provide the Alert component with all the children passed to the current component which owns the above render() method?

Or would I explicitly have to provide the children like this?

render() {
    return (
        <Alert {...this.props}>{this.props.children}</Alert>
    );
}

Solution

  • After trying, it turns out: Yes, the children are also passed on.

    As stated in this answer: whatever properties are in the object, they will be spread.