CODEWITHSUNDEEP
javascriptreactjsantd
Anderson MGR
Anderson MGR

Reputation: 1

How to fix Warning about React.forwardRef() after update Ant Design?

After updating Ant to version 3.16.6, console shows this warning:

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

This appear only when my child component is wrapped in form.getFieldDecorator(). Case without getFieldDecorator() works successfully. PS: My child component is not a Function Component, it's statefull.

In the past, I had version 3.11.0 and it worked fine.

The code is a simple case, not much:

HOC

[...]
render() { 
    return (
        <>
            <Form.Item>                                         
                {form.getFieldDecorator('descricaoUnidadeTrabalho', {rules})(
                    <MyChild 
                        props={props} 
                        onChange={id => form.setFieldsValue({ id })}
                    />
                )}
            </Form.Item>
        </>
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(
    Form.create()(MyComponent)
);

Child Component

[...]
render() {
    return (
        <Select props>
            <Select.Option key={id} value={id}>
                {value}
            </Select.Option>
        </Select>
    ); 
}
export default MyChild;

What can go wrong in my case, could you please advise me?

Upvotes: 0

Views: 5129

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

getFieldDecorator forwards ref to its children components.

In your case, it tries to forward ref to MyChild, but you didn't implement it in your component.

That's why you need to use forwardRef, possible solution:

const MyChild = React.forwardRef(({ onChange, ...props }, ref) => (
  <Select {...props} ref={ref}>
    <Select.Option key={id} value={id}>
      {value}
    </Select.Option>
  </Select>
));

export default MyChild;

Note calling an attribute as props is very confusing and error-prone.

Upvotes: 2

Related Questions