Code Editor
Learn

You can nest JSX elements inside of other JSX elements, just like in HTML.

Here's an example of a JSX <h1> element, nested inside of a JSX <a> element:

<a href="https://www.google.net"><h1>Click me I am Google</h1></a>

To make this more readable, you can use HTML-style line breaks and indentation:

<a href="https://www.google.net"> <h1> Click me I am Goooogle </h1> </a>

If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:

( <a href="https://www.google.net"> <h1> Click me I am Goooooogle </h1> </a> )

Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! Here's an example of a nested JSX expression being saved as a variable:

var theGoogle = ( <a href="https://www.google.net"> <h1> Click me I am Gooooooooooogle </h1> </a> );
Report a Bug
If you see a bug or any other issue with this page, please report it here.