Material-table: Adding a custom render function to the Search icon causes two warnings in the console

Created on 29 May 2019 · 4Comments · Source: mbrn/material-table

Describe the bug
If I add a custom render function to the "Search" icon prop, two warnings will appear in the console.

To Reproduce
Steps to reproduce the behavior:

https://codesandbox.io/embed/blissful-sky-8w5th

Expected behavior
The console stays clear of errors.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: any
Browser any

bug

Source

Flixbox

Most helpful comment

@Flixbox,

This is not a bug. Actually React.forwardRef required after mui4.0.0 upgrade. So if you change you icon usage like this it will be resolved:

icons={{
Search: React.forwardRef((props, ref) =>

)
}}

mbrn on 29 May 2019

❤1 👍1

All 4 comments

Hi @Flixbox ,

Thanks for clear issue. I will take a look at this asap.

mbrn on 29 May 2019

🎉1

@Flixbox,

This is not a bug. Actually React.forwardRef required after mui4.0.0 upgrade. So if you change you icon usage like this it will be resolved:

icons={{
Search: React.forwardRef((props, ref) =>

)
}}

mbrn on 29 May 2019

❤1 👍1

@mbrn I know this is not a bug, and the issue is closed - but I ran into this and could not fix it with your proposed solution. So I figured it may be valuable to give more detail on your fix.
I tried this (typescript):

import { Search } from '@material-ui/icons';

const SearchWithRef = React.forwardRef<SVGSVGElement, {}>((props, ref) => (
      <Search ref={ref} {...props} />
));

...

icons={{
     Search: () => <SearchWithRef />,
}}

But the error still shows up. Any idea what I did wrong? I thought this is your solution.

rnacken on 6 Jun 2019

Can you try this:

import { Search } from '@material-ui/icons';

icons={{
     Search: React.forwardRef<SVGSVGElement, {}>((props, ref) => (
      <Search ref={ref} {...props} />
)),
}}

mbrn on 8 Jun 2019

Was this page helpful?

0 / 5 - 0 ratings