Rendering Arrays in React – HAPITECHS

Rendering Arrays in React

One of the advantages of using a modern web language like JavaScript is that you can automate the generation of chunks of HTML quickly and easily.

Using something like a loop against an array or an object means you only have to write the HTML per item once time. Better still, any future edits only have to be applied once and only once.

Like most power, it does come with some responsibility. Let’s take a look at some of the caveats, err, responsibility we have to address when rendering arrays with React.

Rendered Collections Components Must Have a Key

Let’s take this simple example, we have an array of reptiles and we want to loop through them and render them as list items:

function ReptileList() {   const reptiles = ['alligator', 'snake', 'lizard'];    return (     <ol>       { => <li>{reptile}</li>)}     </ol>   ); } 

Not much to it, just take the array of reptiles and map them to the new <li> components. But if you check the console, you’ll see that React is throwing a warning about the children lacking keys.

Using unique keys on collections of components is how React knows what to re-render and not re-render when the data changes. Without said keys, we would have to re-render the entire collection with every update, or worse, a future version of React would stop rendering these components all together!

To resolve the warning, all we need to do is include a key on our list items:

function ReptileList() {   const reptiles = ['alligator', 'snake', 'lizard'];    return (     <ol>       { => (         <li key={reptile}>{reptile}</li>       ))}     </ol>   ); } 

Rendered Arrays Don’t Need to Worry About Keys

This may seem somewhat counter intuitive based on the previous section, but if we were to rework the previous code to omit the use of and return just an array of list items, the need for a key goes away:

function ReptileListItems() {   const reptiles = ['alligator', 'snake', 'lizard'];    return => (     <li>{reptile}</li>   )); } 

The negative to this approach would be that the lack of the unique keys means React will in fact re-render the entire collection with every update. Depending on the nature of what you’re rendering this may not be much of an issue.

Adjacent Components Must Be Wrapped

You probably noticed that in order to return the array of components the wrapper, the ordered list component was omitted. This was by design so that we could roll into this next example.

Let’s say we knew we’d only have a couple of reptiles on the list and didn’t particularly care to write a loop, we’d potentially end up with code like this:

function ReptileListItems() {   return (     <li>alligator</li>     <li>snake</li>     <li>lizard</li>   ); } 

While not nearly as clever as including a loop, it’s still pretty clean and if it’s probably not going to be touched again, should do the job.

Not so fast! Attempting to render a block of components like this results in a hard error, not even just a warning.

React expects adjacent JSX elements to be wrapped up in a single tag. Effectively speaking, you must always return a single component from any of your rendering methods.

But wait, didn’t we just return an array by way of earlier?

We certainly did, and that’s definitely one approach we can take to this, simply converting our block of components into an array:

function ReptileListItems() {   return [     <li>alligator</li>,     <li>snake</li>,     <li>lizard</li>,   ]; } 

This works well enough, but in my opinion isn’t nearly as elegant as it could be.

Prior to React v16.2, I would simply wrap the block of components in a <div> component and call it a day:

function ReptileListItems() {   return (     <div>       <li>alligator</li>       <li>snake</li>       <li>lizard</li>     </div>   ); } 

Better looking, but it always bothered me that I was introducing unnecessary elements into my markup. Reminded me of the sites built in FrontPage or Dreamweaver back in the day that were just a series of tables wrapped in tables wrapped in…

With the release of React v16.2 a new component was included, a “fragment” component, React.Fragment that’s sole purpose is to make it easier to handle blocks of components without introducing any unnecessary markup to your app:

function ReptileListItems() {   return (     <React.Fragment>       <li>alligator</li>       <li>snake</li>       <li>lizard</li>     </React.Fragment>   ); } 

Awesome!! But wait, that’s actually wordier than using a <div>. You could import Fragment directly, but it’s still somewhat of an eyesore.

Fortunately, the React team was a step ahead and after exploring a few different syntax options, landed on a shorthand syntax for React Fragments in JSX which makes it even more concise:

function ReptileListItems() {   return (     <>       <li>alligator</li>       <li>snake</li>       <li>lizard</li>     </>   ); } 

Using fragments means you can not only omit the keys from your child components, but also omit the brackets and commas and quotes (if you’re including unwrapped text).

Leave a Reply

Your email address will not be published. Required fields are marked *