Michael J. Stokes | Learning React ES6: Working With Arrays in JSX


Last lesson was dealing with arrays in React ES6. Arrays are supported in JSX. Arrays are created like usual [1,2,3], the array is captured but not rendered on the screen. In order for the array to render on the screen, it has to be wrapped in curly braces like other Javascript expressions {[1,2,3]}. The output would be 123 without any commas.

There is a workaround. Adding html tags to the arrays like the <p> would work. This can be done like this :

{
[<p>1</p>, <p>2</p>,<p>3</p>]
}

In order to access an array in JSX, the key attribute needs to be place in each tag.

{
[<p key="1">1</p>, <p key="2">2</p>,<p key="3">3</p>]
}

Here is an example of using .map in JSX

const numbers = [55, 101, 1000];

{
numbers.map((number) => {
return <p key={number}>Number: {number}</p>;
})

The results would be Number: 55, Number: 101, and Number: 1000. That’s how arrays are done in JSX.

Happy Coding!



No Comments Yet

You can be the first to comment!


Leave a Comment






Previous Post : « | Next Post :