Failed propType for Tooltip

Describe the bug Warning popping up in the console (on 1.39 and MUI 4.0.1):

Failed prop type: Invalid prop `children` supplied to `Tooltip`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead?
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by MTableToolbar)
    in div (created by ForwardRef(InputAdornment))
    in ForwardRef(InputAdornment) (created by Context.Consumer)
    in WithFormControlContext(ForwardRef(InputAdornment)) (created by WithStyles(WithFormControlContext(ForwardRef(InputAdornment))))
    in WithStyles(WithFormControlContext(ForwardRef(InputAdornment))) (created by MTableToolbar)

To Reproduce

Steps to reproduce the behavior: 1.

const tableIcons: Icons = {
  Add: () => <AddBox />,
  Check: () => <Check />,
  Clear: () => <Clear />,
  Delete: () => <DeleteOutline />,
  DetailPanel: () => <ChevronRight />,
  Edit: () => <Edit />,
  Export: () => <SaveAlt />,
  Filter: () => <FilterList />,
  FirstPage: () => <FirstPage />,
  LastPage: () => <LastPage />,
  NextPage: () => <ChevronRight />,
  PreviousPage: () => <ChevronLeft />,
  ResetSearch: () => <Clear />,
  Search: () => <Search />,
  SortArrow: () => <ArrowUpward />,
  ThirdStateCheck: () => <Remove />,
  ViewColumn: () => <ViewColumn />
};
const [geoHoldings, setGeoHoldings] = React.useState(
  toJS(viewModel.geoHoldings) // [{country: 'US', weight: 1}]
);
<MaterialTable
    icons={tableIcons}
    columns={[
        {
        title: "Market",
        field: "market",
        lookup: marketLookup,
        emptyValue: "-"
        },
        {
        title: "Region",
        field: "region",
        lookup: regionsLookup,
        emptyValue: "-"
        },
        {
        title: "Sub region",
        field: "subRegion",
        lookup: subRegionsLookup,
        emptyValue: "-"
        },
        {
        title: "Country",
        field: "country",
        lookup: countriesLookup,
        emptyValue: "-"
        },
        {
        title: "Weight",
        field: "weight",
        emptyValue: "0 %",
        type: "numeric",
        render: rowData => `${rowData.weight.toFixed(2)} %`
        }
    ]}
    data={geoHoldings}
    />

1. Navigate to it
2. See the error in the console

Expected behavior Not having the message showing up

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version 74.0.3729.169

[amendoza-micronsystems]

Hi, I got the same error and tried adding React.forwardRef(...) as recommended but to no avail. I don’t know if the problem is in my implementation but I wasn’t able to fix it. I was able to clear the warning by wrapping the component inside the Tooltip with <span>. Voila! Tooltip is working and no warning.

[kapoorruchi]

Basically, material-ui <Tooltip> expects children to be an element as it is being referenced internally as refs. Now in our case , we are using : <Tooltip title="test"> <FontAwesomeIcon icon={faMicrophone} /> </Tooltip>

FontAwesomeIcon is a functional component which is not expected.

Instead use : <Tooltip title="test"> <span> <FontAwesomeIcon icon={faMicrophone} /> </span> </Tooltip>

This will not give any warning and tooltip will show