React bootstrap Tooltip throws "React.Children.only expected to receive one React child element" error.
I am using react-bootstrap library ( https://react-bootstrap.github.io/components.html#tooltips ) and I want to display multiple divs per line, each 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 part of the code I wrote for this. An example of a drawing object looks like this:
[
{
"id": "123442b4d432d10008c650f7",
"name": "Example Blueprint",
"components": [
{
"name": "Apache",
"module": "apache",
"version": "9000"
}
]
}
]
For some unknown reason, I get the error " React.Children.only is expected to receive one React child. " Inferred by "OverlayTrigger".
I debugged it a bit and I found that inside the OverlayTrigger this.props.children is an array and I guess it should be an object, but I don't know what is wrong. The OverlayTrigger child is a single div. Any ideas what is the reason for the error?
EDIT: The error is thrown like this:
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/OverlayTrigger.js#L263
children variable is an array instead of an object. I do not know why.
source to share
Ok I found out what the problem is. This was a special 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 changed all recursive recursions. A simplification of 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 it changed the children from an object to a single array of elements. I just replaced { this.cloneChildrenWithProps(children) }
with { children }
and solved the problem.
source to share
Maybe this works:
<OverlayTrigger key={ i } placement='top' overlay={ tooltip }>
<ImageIcon name={ component.name } size='small'/>
</OverlayTrigger>
The examples in the document contain exactly one child - no multiple dimensions. ( https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger ), for example:
<OverlayTrigger placement="top" overlay={tooltip}>
<Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
source to share