Using <Button> results in "findDOMNode is deprecated in StrictMode" warning

[latobibor]

• I have searched the issues of this repository and believe that this is not a duplicate * (It was reported by somebody else but not through Issue Creator and it got auto-closed).

Reproduction link

latobibor/antd-tryout@e373cb5

Steps to reproduce

1. install dependencies (npm i)
2. run app (npm start)
3. check console

What is expected?

No warnings should be displayed.

What is actually happening?

A warning message will appear in console.log stating "Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:"

Environment	Info
antd	4.0.3
React	16.13.1
System	Windows 8.1
Browser	Chrome 80

---

The source of the problem is coming from <Button /> component.

See the file in question:
latobibor/antd-tryout@e373cb5#diff-b525f6f7c3584f9af17112d37dae3a42

[firesoftdev]

retiring the <React.StrictMode> tag in method ReactDOM.render() works normally

[saostad]

I am getting same error in strict mode antd v4.0.4

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

[ana-rajat]

Is there any solution regarding the same or any suggestions would also be appreciated.

[myou]

Removing strict mode just for the sake of a button is ridiculous. This is a legit problem with antd that needs to be fixed.

[duongleh]

I am getting the same error

[yoyo837]

Need to do a lot of migration, such as #9870

[DavidSolerMarco]

The same here after a fresh install using the guide https://ant.design/docs/react/use-in-typescript

[yayxs]

I have the same problem

desc

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Wave which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

solve

ReactDOM.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>,
  ,
  document.getElementById('root')
);

[marianelaleoncini]

I have the same issue. Can you fix it, please?

[Sikae]

I have the same issue. Can you fix it, please?

[javiermoli]

I have the same issue, but I'm using other components, so the problem is not just the <Button />.

[harbhub]

I have the same problem. I'm using <InputMask ...> which comes from the "react-input-mask" library. I also use "material-ui" for the TextField element.

<InputMask
    mask='99/99/9999'
    onFocus={onFocus} onBlur={onBlur}
    defaultValue={fields.birthdate.value}
    error={fields.birthdate.error}
    helperText={fields.birthdate.helperText}
    id='birthdate' name='birthdate' label='Birthdate MM/DD/YYYY'
    type='tel' variant='filled' margin='dense'
>
    {(inputProps) =>
        <TextField {...inputProps} />
    }
</InputMask>

The line in question seems to be the <TextField {...inputProps} /> line.