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 [email protected] ş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 <Input {...this.props} /> } }

at the end

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

—

15 Eki 2019 Sal 23:13 tarihinde brunoborta [email protected] ş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:

<NumberFormat value={result} onChange={e => setResult(e.target.value)} 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 .

[rifky-rangkuti]

still open?

[concreo]

I got stuck on this issue working with a custom functional Input component and the react-form-hook package. I finally was able to get it to work.

First, the important thing to note is that NumericFormat does not accept any ref. When using react-form-hook, the FormField is rendering an object with a field property and that field that you normally spread to the Input field contains the ref that you should NOT try to pass to the NumericFormat component.

So, by using object destructuring, you can get the ref and the rest of the props with the spread operator before passing it to the NumericFormat component. In addition to that, you can pass the ref to the getInputRef.

        <FormField
            name="currency"
            control={form.control}
            render={({ field }) => {
              const { ref, ...rest } = field;
              return (
                <FormItem>
                  <FormLabel>Maximum rate allowed</FormLabel>
                  <FormControl>
                    <NumericFormat
                      thousandsGroupStyle="thousand"
                      allowNegative={false}
                      valueIsNumericString={true}
                      thousandSeparator=","
                      customInput={Input}
                      getInputRef={ref}
                      decimalScale={2}
                      prefix="$"
                      min={0}
                      {...rest}
                    />
                  </FormControl>

                  <FormMessage />
                </FormItem>
              );
            }}
          />

[carloschneider]

I got stuck on this issue working with a custom functional Input component and the react-form-hook package. I finally was able to get it to work.

First, the important thing to note is that NumericFormat does not accept any ref. When using react-form-hook, the FormField is rendering an object with a field property and that field that you normally spread to the Input field contains the ref that you should NOT try to pass to the NumericFormat component.

So, by using object destructuring, you can get the ref and the rest of the props with the spread operator before passing it to the NumericFormat component. In addition to that, you can pass the ref to the getInputRef.

        <FormField
            name="currency"
            control={form.control}
            render={({ field }) => {
              const { ref, ...rest } = field;
              return (
                <FormItem>
                  <FormLabel>Maximum rate allowed</FormLabel>
                  <FormControl>
                    <NumericFormat
                      thousandsGroupStyle="thousand"
                      allowNegative={false}
                      valueIsNumericString={true}
                      thousandSeparator=","
                      customInput={Input}
                      getInputRef={ref}
                      decimalScale={2}
                      prefix="$"
                      min={0}
                      {...rest}
                    />
                  </FormControl>

                  <FormMessage />
                </FormItem>
              );
            }}
          />

Thanks! It works!