React bootstrap Tooltip throws error 'React.Children.only expected to receive a single React element child.'

Ok, I found out what was the problem. It was very specific case.

In short it was like this:

<SomeOtherComponent>    { _.map(blueprint.components, (component, i) => {        const tooltipId = 'tooltip-' + _.replace(blueprint.name, ' ', '-') + '-' + _.replace(component.name, ' ', '-');        const tooltip = (            <Tooltip id={ tooltipId }>                test            </Tooltip>        );        return (            <div>                <OverlayTrigger key={ i } placement='top' overlay={ tooltip }>                    <div>                        <ImageIcon name={ component.name } size='small'/>                    </div>                </OverlayTrigger>            </div>        );    }) }</SomeOtherComponent>

And SomeOtherComponent was modifying all of the it's children recursively.Simplifying SomeOtherComponent looked like this:

const SomeOtherComponent = createClass({    cloneChildrenWithProps(children) {        return React.Children.map(children, child => {            return child;        });    },    render() {        const { children } = this.props;        return (            <div>                { this.cloneChildrenWithProps(children) }            </div>        );    }});

And this changed children from object to one item array.I've just replaced { this.cloneChildrenWithProps(children) } with { children } and it solve the problem.

Maybe this works:

<OverlayTrigger key={ i } placement='top' overlay={ tooltip }>  <ImageIcon name={ component.name } size='small'/></OverlayTrigger>

The Examples in the doc contain exactly one child element - no multiple dimensions. ( https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger )e.g.:

<OverlayTrigger placement="top" overlay={tooltip}>  <Button bsStyle="default">Holy guacamole!</Button></OverlayTrigger>

Wrap you { _.map ... } with single <div>