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

dandrei · 2019-05-06T11:58:50Z

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.

The text was updated successfully, but these errors were encountered:

joziahg · 2019-05-14T15:01:16Z

Having this issue aswell. material-ui/core@4.0.0-beta.2 & mui-datatables@2.1.0

gabrielliwerant · 2019-05-14T19:13:48Z

This library does not yet fully support versions of the material-ui library that are that high. The first step would be to take it up to the high 3's, which I've done some work on locally.

dandrei · 2019-05-14T21:08:58Z

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.).

shawnmitchell · 2019-05-30T22:59:57Z

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

pfarnach · 2019-05-31T21:49:30Z

Are there any plans to support v4 now that it's officially released? Maybe a set of milestones for an mui-datatables v3 release with associated issues would be a good start, and then people (like myself) could start picking them up if you're looking for help, @gabrielliwerant.

gabrielliwerant · 2019-06-03T08:18:36Z

@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.

pgoforth · 2019-06-12T19:25:59Z

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

mui-datatables/src/components/TableToolbar.js

Lines 214 to 223 in dc45413

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

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

lengband · 2019-06-24T02:31:58Z

I Having this issue aswell. material-ui/core@4.0.2 & mui-datatables@2.5.1

import React from 'react'
import MUIDataTable from 'mui-datatables'

const columns = [
  {
    name: 'name',
    label: 'Name',
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: 'company',
    label: 'Company',
    options: {
      filter: true,
      sort: false
    }
  },
  {
    name: 'city',
    label: 'City',
    options: {
      filter: true,
      sort: false
    }
  },
  {
    name: 'state',
    label: 'State',
    options: {
      filter: true,
      sort: false
    }
  }
]

const data = [
  { name: 'Joe James', company: 'Test Corp', city: 'Yonkers', state: 'NY' },
  { name: 'John Walsh', company: 'Test Corp', city: 'Hartford', state: 'CT' },
  { name: 'Bob Herm', company: 'Test Corp', city: 'Tampa', state: 'FL' },
  { name: 'James Houston', company: 'Test Corp', city: 'Dallas', state: 'TX' }
]

const options = {
  filterType: 'checkbox'
}

export default class ArticleList extends React.Component {
  render () {
    return (
      <MUIDataTable
        title={'Employee List'}
        data={data}
        columns={columns}
        options={options}
      />
    )
  }
}

Captainlonate · 2019-06-26T01:28:01Z

Yeah, still an issue with "@material-ui/core": "^4.1.3" and "mui-datatables": "^2.5.1" using simply the starter code from the documentation.
Is this days away from being fixed? Or should I find another Data Table?

gabrielliwerant · 2019-06-26T02:30:07Z

FYI, the upgrade roadmap is behind this issue in terms of priority: #679. When I get a good chunk of time, I can begin making progress on it, but for the near and mid future, I recommend not using the latest material ui versions.

mib00038 · 2019-08-07T18:29:28Z

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

mui-datatables/src/components/TableToolbar.js

Lines 214 to 223 in dc45413

<ReactToPrint

trigger={() => (

<Tooltip title={print}>

<IconButton aria-label={print} classes={{ root: classes.icon }}>

<PrintIcon />

</IconButton>

</Tooltip>

)}

content={() => this.props.tableRef()}

/>

...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()} 
 />

YoungCC2 · 2019-08-31T16:00:18Z

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

<Form.Item label="Dragger"> <div className="dropbox"> {getFieldDecorator('dragger', { rules: [{ required: true, message: 'Please select your country!' }], })( <Dragger {...props}> <p className="ant-upload-drag-icon"> <Icon type="inbox" /> </p> <p className="ant-upload-text">Click or drag file to this area to upload</p> <p className="ant-upload-hint"> Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files </p> </Dragger> )} </div> </Form.Item>
how to r it

gabrielliwerant · 2019-08-31T20:08:28Z

@YoungCC2 Can you give the versions of react, material, and this library that cause you to experience that error?

YoungCC2 · 2019-09-01T05:31:03Z

@YoungCC2 Can you give the versions of react, material, and this library that cause you to experience that error?
"react": "^16.3.2", "react-dom": "^16.3.2", "antd": "^3.22.2",

`<Form.Item label="上传logo">

{getFieldDecorator('dragger', {
rules: [{ required: true, message: 'Please select your country!' }],
})(
<Dragger {...props}>

点击上传logo

                                </p>
                            </Dragger>
                        )}
                    </div>
                </Form.Item>`

gabrielliwerant · 2019-09-01T18:42:04Z

@YoungCC2 Thanks, but I still need your '@material-ui/core' and 'mui-datatables' versions.

YoungCC2 · 2019-09-03T09:15:10Z

@gabrielliwerant i do`t install @material-ui/core and mui-datatables

gabrielliwerant · 2019-09-03T19:38:27Z

@YoungCC2, I'm not sure I understand. This library is mui-datatables, so you must have this installed to use it at all, unless you are posting on the wrong github library!

YoungCC2 · 2019-09-05T05:55:49Z

 i rewrite this component. the question was reslove .........

…

------------------ 原始邮件 ------------------ 发件人: "Gabriel Liwerant"<notifications@github.com>; 发送时间: 2019年9月4日(星期三) 凌晨3:38 收件人: "gregnb/mui-datatables"<mui-datatables@noreply.github.com>; 抄送: "卯卯"<743472220@qq.com>; "Mention"<mention@noreply.github.com>; 主题: Re: [gregnb/mui-datatables] @material-ui/core 4.0.0-beta.1 Warning: Function components cannot be given refs. (#595) @YoungCC2, I'm not sure I understand. This library is mui-datatables, so you must have this installed at all, unless you are posting on the wrong library! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

marcusjwhelan · 2019-11-01T17:01:26Z

What if its not an IconButton and just an Icon. More specifically the icon is dynamically loaded as a functional method so I was pointed in the direction of creating a forward ref component but still nothing would pop up on hover.

https://stackoverflow.com/questions/57527896/material-ui-tooltip-doesnt-display-on-custom-component-despite-spreading-props

HarishRocks · 2022-06-30T04:50:21Z

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>

gabrielliwerant added the on hold label May 14, 2019

This was referenced Aug 14, 2019

Fix to make tests compatible with Material UI v3 and v4 #832

Merged

Fixes for 676 and 595 #836

Merged

patorjk mentioned this issue Aug 22, 2019

Function components cannot be given refs. #850

Closed

gabrielliwerant added enhancement and removed on hold labels Aug 28, 2019

patorjk closed this as completed Jul 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dandrei commented May 6, 2019

joziahg commented May 14, 2019 •

edited

Loading

gabrielliwerant commented May 14, 2019

dandrei commented May 14, 2019 •

edited

Loading

shawnmitchell commented May 30, 2019

pfarnach commented May 31, 2019 •

edited

Loading

gabrielliwerant commented Jun 3, 2019

pgoforth commented Jun 12, 2019

lengband commented Jun 24, 2019

Captainlonate commented Jun 26, 2019

gabrielliwerant commented Jun 26, 2019

mib00038 commented Aug 7, 2019 •

edited

Loading

YoungCC2 commented Aug 31, 2019 •

edited

Loading

gabrielliwerant commented Aug 31, 2019

YoungCC2 commented Sep 1, 2019

gabrielliwerant commented Sep 1, 2019

YoungCC2 commented Sep 3, 2019

gabrielliwerant commented Sep 3, 2019 •

edited

Loading

YoungCC2 commented Sep 5, 2019 via email

marcusjwhelan commented Nov 1, 2019

HarishRocks commented Jun 30, 2022 •

edited

Loading

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

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

Comments

dandrei commented May 6, 2019

joziahg commented May 14, 2019 • edited Loading

gabrielliwerant commented May 14, 2019

dandrei commented May 14, 2019 • edited Loading

shawnmitchell commented May 30, 2019

pfarnach commented May 31, 2019 • edited Loading

gabrielliwerant commented Jun 3, 2019

pgoforth commented Jun 12, 2019

lengband commented Jun 24, 2019

Captainlonate commented Jun 26, 2019

gabrielliwerant commented Jun 26, 2019

mib00038 commented Aug 7, 2019 • edited Loading

YoungCC2 commented Aug 31, 2019 • edited Loading

gabrielliwerant commented Aug 31, 2019

YoungCC2 commented Sep 1, 2019

gabrielliwerant commented Sep 1, 2019

YoungCC2 commented Sep 3, 2019

gabrielliwerant commented Sep 3, 2019 • edited Loading

YoungCC2 commented Sep 5, 2019 via email

marcusjwhelan commented Nov 1, 2019

HarishRocks commented Jun 30, 2022 • edited Loading

joziahg commented May 14, 2019 •

edited

Loading

dandrei commented May 14, 2019 •

edited

Loading

pfarnach commented May 31, 2019 •

edited

Loading

mib00038 commented Aug 7, 2019 •

edited

Loading

YoungCC2 commented Aug 31, 2019 •

edited

Loading

gabrielliwerant commented Sep 3, 2019 •

edited

Loading

HarishRocks commented Jun 30, 2022 •

edited

Loading