JSX to TSX

You can write JSX in TypeScript components just as you would write JSX with JavaScript. Typescript allows you to strongly type your React component functions, using the type React.FunctionComponent<>, often abbreviated to React.FC<>.

const MyComponent: React.FC<{}> = () => <p>Hello</p>

By assigning the React.FC<> type to your function component you ensure that the function returns an object type compatible with React's render methods.

Hover your mouse over the the failing component on the right to see the TypeScript error.

The error is because the function returns void which is not valid for a React component. TypeScript raises errors like this earlier in the development process, giving you a shorter feedback cycle.

You can ask me to explain anything further or give you hints with the exercise.