React-number-format: react React.forwardRef warning in react 16.3.0 version

[sevketriza]

backend.js:6 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 NumberFormat.
in Unknown (created by NumberFormat)

[YagoROliveira]

backend.js:6 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 NumberFormat.
in Unknown (created by NumberFormat)

Hei @sevketriza, print your render.

[s-yadav]

@sevketriza can you provide the snippet of how you are using number format?

[sevketriza]

@sevketriza can you provide the snippet of how you are using number format?

I tried with some cases and detected the case is; when i use customInput property with semenctic-ui's Form.Input error is occuring.

"semantic-ui-react": "0.84.0"

[xeii]

I have got this same issue when using our custom input, which is React.FunctionComponent. I would think you can reproduce this with any custom input which is a function component.

[sevketriza]

i solved it like your solution by wrapping with class component.thenks at
all

27 Eyl 2019 Cum 13:14 tarihinde Antti Väyrynen [e-mail]
şunu yazdı:

I have got this same issue when using our custom input, which is
React.FunctionComponent. I would think you can reproduce this with any
custom input which is a function component.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/s-yadav/react-number-format/issues/334?email_source=notifications&email_token=ACVRCDMDTMTCMUF3Z54SN4LQLXMGRA5CNFSM4IPAB42KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7YOILQ#issuecomment-535880750,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACVRCDORSG7LPXLXJWXNDKDQLXMGRANCNFSM4IPAB42A
.

[s-yadav]

@sevketriza react-number-format does not pass any ref.
It will be still helpful if you can create a sandbox with this warning. In case it is a real issue associated with react-number-format.

[mvklingeren]

This is not working in React FC (function components) because the defaultProps has getInputRef:noop while the default should be undefined. Otherwise an empty function is given to ref.

PR: 355

[brunoborta]

What's the solution to this? I have a FC and I am still getting the ugly warning. Anything I can do to bypass and not show the message? I'm passing it like so:

<NumberFormat value={result} onChange={e => setResult(e.target.value)} customInput={Input} suffix="%" onBlur={onBlurResult} />

[sevketriza]

my solution is wrapping customInput component as class component.

like that
class MyCustomInput extends Component {
render(){
return
}
}

at the end

customInput={MyCustomInput} suffix="%" onBlur={onBlurResult} />

—

15 Eki 2019 Sal 23:13 tarihinde brunoborta [e-mail] şunu
yazdı:

What's the solution to this? I have a FC and I am still getting the ugly
warning. Anything I can do to bypass and not show the message? I'm passing
it like so:

customInput={Input} suffix="%" onBlur={onBlurResult} />

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/s-yadav/react-number-format/issues/334?email_source=notifications&email_token=ACVRCDLM7BFNEPWQ7XFI2VTQOYP5VA5CNFSM4IPAB42KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBKCFQA#issuecomment-542384832,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACVRCDMFMHMUW7IBIKGKLFTQOYP5VANCNFSM4IPAB42A
.