In TSX file : Property 'createRef' does not exist on type 'typeof React'

Question

I need the reference of the component. Just shifted from jsx to tsx and can't find a solution for this problem.

Other workaround would be to use query selector but that's not a good way of doing things in react I believe.

Here is the constructor function

constructor(props) {
    super(props);
    this.state = {
        data: initialData,
        showNewListForm: false,
        whichButtonClicked: undefined,
        background: props.background || "#23719f"
    };

    this.divContainerRef = React.createRef();
    console.log("kanban reference : " + React.createRef().current);

    this.handleDragStart = this.handleDragStart.bind(this);
    this.handleDragEnd = this.handleDragEnd.bind(this);
    this.handleLaneDragEnd = this.handleLaneDragEnd.bind(this);
    this.handleLaneDragStart = this.handleLaneDragStart.bind(this);
    this.onCardAdd = this.onCardAdd.bind(this);
    this.onCardClick = this.onCardClick.bind(this);
    this.addNewListHandler = this.addNewListHandler.bind(this);
    this.containerRefResolver = this.containerRefResolver.bind(this);
    this.isBoardPresent = this.isBoardPresent.bind(this);
}

Altricial

Have you imported React correctly? – Undamped

import * as React from 'react'; – Altricial

Answer 1

Looks like you have an out of date version of @types/react. The latest version 16.3.14 has type definitions for createRef.

Demilitarize

Bingo !!! Your solution worked mate ! Thanks a lot. I was meddling with the code and found one more solution, a workaround , (React as any).createRef() worked as well. – Altricial

Answer 2

In my Typescript codebase I had to update react-dom types:

yarn upgrade @types/react-dom^16.3.0

Pentyl

There is no tagged version of react-dom type present on npm or yarn for 16.3.0. – Curb

you're right. I assume yarn resolved it to the next semantic version up – Pentyl