Challenges 5 exercises

Custom JSX Elements

JSX includes several elements like div, span, h1, and so on.

In this exercise, we'll be adding support for our own custom-element.

Currently, we have an error when we try to use it:

const element = <custom-element>hello world</custom-element>;

The error reads:

Loading exercise


0:00 This is a fun little exercise. We are importing React into this project. The reason we're doing that is because we want to add a custom element to React's JSX. This is JSX. JSX bundles with a bunch of different stuff in. It has div. It has span. It has -- I don't know -- whatever, h1, h2.

0:21 We want to add a custom-element to JSX. We want it to be custom-element, like this, as though we're using a Web component or something. We want to add it so that this error goes away. Property custom-element does not exist on type JSX.IntrinsicElements.

0:41 You're going to need to do a bit of investigation here to dive into React typings to see if you can figure out where, for instance, JSX.IntrinsicElements even lives and how you can possibly, from this file, add in a new type to it. You'll need a bit of the knowledge that you picked up in the globals section and also the external libraries section. Good luck.