gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clarifying adjacent JSX elements (#30447)

Browse Source 
Added more information and clearer code examples of how to correctly create a JSX element with adjacent tags.
This commit is contained in:
Ryan Fuhrman
2019-03-09 04:46:45 -05:00
committed by The Coding Aviator
parent e643227efa
commit ee2c7bd7c3
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
guide/english/react/jsx/index.md
View File

@ -49,9 +49,19 @@ function who() {
const greet = <h1>Hello {who()}!</h1>;
```
### Only a single parent tag is allowed
A JSX expression must have only one parent element. We can have multiple elements nested within the parent element.
A valid JSX expression can only have one tag at the highest level. However, the tag at the highest level, or the parent, can have as many child tags as you wish. If you run into a situation where you need to create a JSX expression with two tags at the same level, they must be wrapped in a an enclosing tag.
```jsx
// This is invalid.
const tags = (
<h1>Hello World!</h1>
<h3>This is my special list:</h3>
<ul>
<li>Once</li>
<li>Twice</li>
</ul>
);
// This is valid.
const tags = (
<div>
@ -63,16 +73,6 @@ const tags = (
</ul>
</div>
);
// This is not valid.
const tags = (
<h1>Hello World!</h1>
<h3>This is my special list:</h3>
<ul>
<li>Once</li>
<li>Twice</li>
</ul>
);
```
### All Tags Must Be Closed