Tags in JSX arrays
Let's say we have tags stored in an array:
function App() {
const arr = [<p>1</p>, <p>2</p>, <p>3</p>];
}
We can insert the contents of our variable using curly braces:
function App() {
const arr = [<p>1</p>, <p>2</p>, <p>3</p>];
return <div>
{arr}
</div>;
}
As a result, the tags from the array will be inserted into the specified location and after rendering, the following code will be obtained:
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
Given an array:
function App() {
const arr = [
<li>1</li>,
<li>2</li>,
<li>3</li>,
<li>4</li>,
<li>5</li>,
];
}
Using this array, you will get the following code as the rendering result:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
