Quiz

Evaluate your understanding of creating strongly typed refs in React components with TypeScript. This quiz reinforces key concepts covered in the lesson to help you apply strong typing in your React projects effectively.

We'll cover the following...

Creating strongly-typed refs

We want to get a reference to a div element in a class component and have made an attempt at this below:

class SomeComponent extends React.Component {
  private div = React.createRef<HTMLSpanElement>();

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

What is the problem with this code?

You can’t use createRef in class components.

There is no need to pass the type to createRef because TypeScript will infer it correctly.

The wrong type has been passed into createRef. The type should be HTMLDivElement.

1 / 3

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Quiz