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

Question

I use react-bootstrap library ( https://react-bootstrap.github.io/components.html#tooltips ) and I want to display multiple div's in a row, each single one with a tooltip.

{ _.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>
    );
}) }

This is the piece of code I have written to accomplished that. Example blueprint object looks like that:

[
    {
        "id": "123442b4d432d10008c650f7",
        "name": "Example Blueprint",
        "components": [
            {
                "name": "Apache",
                "module": "apache",
                "version": "9000"
            }
        ]
    }
]

For unclear reason I get the error 'React.Children.only expected to receive a single React element child.' thrown by "OverlayTrigger".

I debugged it a little and I found that inside the OverlayTrigger this.props.children is an array and I assume that it is supposed to be an object, but I have no idea what is wrong. The child of OverlayTrigger is single div. Any ideas what's the reason for the error?

EDIT: Error is thrown by this:

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js#L263

children variable is an array instead of an object. I don't know why.

Answer 1

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.

Answer 2

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>