Types Deep Dive 10 exercises

JSX.Element, React.ReactElement, and React.ReactNode

Here we have a few different types from React:

type ClickMe = React.ReactElement;
type ClickMeToo = JSX.Element;
type ClickMeThree = React.ReactNode;

There are a few different things for you to figure out here:

Challenge 1: Differences Between Types

First, determine the diff

Loading exercise


00:00 Let's now take a look at some of React's built-in types and also some of the JSX built-in types too. We have three nodes here, or three different types. We have React.ReactElement, JSX.Element, and React.ReactNode.

00:14 And I'd like you to basically do three things here, or three or four things. So the first one I want you to do is just figure out the raw difference between all of these types here, between React.ReactElement, JSX.Element, and React.ReactNode.

00:31 See if you can work out which one is wider than the other, which ones are maybe exactly the same, or which ones are narrower than the other. See if you can figure out kind of like a type hierarchy. Figure out what could be assignable to each one. And next, I want you to tell me what the return type of this component is. Simple. If you hover over it, it might give you some information there.

00:53 And this one too, I would like you to tell me whether this will error and why it would error, and also some kind of interesting fun facts here too. There's some cool stuff that's come out recently,

01:08 and there have been some differences about how React.ReactNode works or how it used to as well. And in fact, I will link something below which will give you a bit more information on that. And I'd also like you to tell me why this component does not error, but why this one does. So a few different questions there.

01:26 Take a little explore, and I'll give you my answers in a minute. Good luck!