mui-datatables: @material-ui/core 4.0.0-beta.1 Warning: Function components cannot be given refs.

When using @material-ui/core 4.0.0-beta.1 & mui-datatables 2.0.0 I get the following warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Tooltip`.
    in ViewColumnIcon (created by Tooltip)
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by l)
    in span (created by ForwardRef(IconButton))
    in button (created by ButtonBase)
    in ButtonBase (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
    in WithStyles(ForwardRef(IconButton)) (created by l)
    in l (created by l)
    in div (created by l)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by l)
    in l (created by t)
    in t (created by WithStyles(t))
    in WithStyles(t) (created by t)
    in t (created by t)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by t)
    in t (created by WithStyles(t))

I suspect it has something to do with the fact that the MUI team has changed their components to be functional and use Hooks.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 25
Comments: 20 (2 by maintainers)

Most upvoted comments

@pfarnach Yes, support for v4 is part of the plan. That’s not a bad idea about milestones and/or issues around upgrade necessities. Trying to review some PRs and fix some bugs at the moment, but when I get some time, I can start work on an upgrade roadmap.

+12

gabrielliwerant on Jun 3, 2019

I’ve recently had to add material-ui tooltips to functional components and looks like this does the trick:

wrapping the exported component in React.forwardRef(/* ... */)
adding a second parameter after the props (e.g. ref: React.Ref<HTMLButtonElement>)
passing the ref above to the component included in the functional one

The components that trigger the warning are the mui-datatables toolbar icons (Search, etc.).

dandrei on May 15, 2019

Wrapping the child component with a div worked for me!

Instead of

<Tooltip title={'Reconnect the device to retry'} placement="top">
  <CustomButton disabled>Retry</CustomButton>
 </Tooltip>

do this

<Tooltip title={'Reconnect the device to retry'} placement="top">
  <div>
    <CustomButton disabled>Retry</CustomButton>
  </div>
</Tooltip>

HarishRocks on Jun 30, 2022

https://material-ui.com/guides/composition/#caveat-with-refs

shawnmitchell on May 30, 2019

A lot of v4 is already supported and just works OOTB. There are instances like here:

https://github.com/gregnb/mui-datatables/blob/dc45413152bece974b4379182c68bb030770f860/src/components/TableToolbar.js#L214-L223

…where gregnb/react-to-print uses a cloned and ref injected component on trigger (gregnb/react-to-print#131), so things like that are the only places where I’m seeing issues.

Just wrap the Tooltip in a div.

<ReactToPrint 
   trigger={() => ( 
     <div>
       <Tooltip title={print}> 
         <IconButton aria-label={print} classes={{ root: classes.icon }}> 
           <PrintIcon /> 
         </IconButton> 
       </Tooltip> 
     </div>
   )} 
   content={() => this.props.tableRef()} 
 />

mib00038 on Aug 7, 2019