[Tooltip] Failed prop type: Invalid prop `children` of type `array` supplied to `ForwardRef(Tooltip)`, expected a single ReactElement.

When deep cloning some elements in a JSX tree with Tooltip being amongst them, the error “Failed prop type: Invalid prop children of type array supplied to ForwardRef(Tooltip), expected a single ReactElement.” occurs.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Deep mapping over children that include material ui’s Tooltip fails.

Expected Behavior 🤔

Deep mapping over children that include material ui’s Tooltip should work.

Steps to Reproduce 🕹

The simplified example (without context about why i’m deepmapping over children in the first place) is in this Codesandbox: https://codesandbox.io/s/mui-deepmap-tooltip-problem-simplified-gs7zy

Steps:

1. Take a look at the source code, especially the deepMap function
2. Check the “deepMap” checkbox
3. See the error shown above in the console, accompanied by dependent errors

Context 🔦

I want to set certain pre-defined props on certain types of elements in a JSX tree. To do so, i deepMap over the children and when I find the correct child type, i cloneElement it with the appropriate props.

The original use case is shown in this Codesandbox: https://codesandbox.io/s/mui-deepmap-tooltip-problem-r4vuj

In this Codesandbox, you can either show the tooltip on the first button or set all buttons to be primary contained, but not both because then you have a combination of my deepMap function being applied and material ui’s Tooltip being used:

[oliviertassinari]

Map always returns an array

You could count the number of children and return a single element if there is only one.

Reacts Children API is required to implement certain functionality and is widely used.

Definitely, we use it too. I was referring to child.props.children that starts to be borderline, leaking into the internals of React.

It would be easier if tooltip could just accept an array of children, and if it gets one, it could wrap an intermediary span to forward the ref to.

If you want to spend time on it, I think that #18119 should be up for grab.

[codepunkt]

Thanks Olivier!