JSX Components

👨‍💼 Great job! We can now use JSX to write custom components and reuse bits of our UI with ease.

🦉 The children prop is special because it can appear either as a prop or in between the opening and closing tags of a component. So these two are equivalent:

<Alert>Something went wrong!</Alert>
<Alert children="Something went wrong!" />

Our Message component uses the "special" and implicit children prop. It's special because it means we can do this:

element = <Message>Hello World</Message>
// is functionally equivalent to:
element = <Message children="Hello World" />

And you can put JSX in the children prop with either syntax as well:

element = (
	<Message>
		<span>Hello</span> <span>World</span>
	</Message>
)
// is functionally equivalent to:
element = <Message children={[<span>Hello</span>, ' ', <span>World</span>]} />

📜 Learn more about passing JSX as children.

But we don't have to use the children prop, we can call it whatever we want. So you could also do:

element = <Message greeting={[<span>Hello</span>, ' ', <span>World</span>]} />

The only thing that's special about the children prop is that it's implicit in JSX.

And sometimes using something other than the children prop can be really useful, but we'll get to that in a future workshop.

04. Custom Components/03. JSX Components (🏁 solution)

JSX Components