React.createRef() causing error 'expected ref to be function or string'

Question

I upgraded my React to 16.3.2 and used React.createRef() as seen here: https://reactjs.org/docs/react-api.html#reactcreateref

But when I am getting the following error:

Uncaught Error: Expected ref to be a function or a string.

When I look at what the function React.createRef() actually returns, I see this:

{ current: null }

What is going wrong here? Has the implementation changed?

I am using react-router-dom for routing, and my component is a class component.

EDIT: this is my code:

export class MyComponent extends Component { 
    constructor(props) {
        super(props);

        this.cardRef = React.createRef();
    }

    render() {
        return (
            <div>
                ...
                <Card ref={this.cardRef}>
                    ...
                </Card>
            </div>
        );
    }
}

Answer 1

To address this:

What is going wrong here? Has the implementation changed?

Nope. It just returns an Object with a property current being set to null. No magic here. You just initiate property in a component with such object and then you pass a reference of this object to the component. React then at some point reassigns current.

this.component = React.createRef() // this.component = { current: null }
// we pass a reference to object above and react will mutate current property at some point
<div ref={this.component} />

The error message seems to suggest you are still using an older version of react. What I would suggest is to

• make sure you got the latest versions of both react and react-dom (16.3.2) declared in package.json
• then removed node_modules and install it again