Framing the problem

Iterating and displaying data is a very common part of building applications. In React (and other frameworks), the most basic way of doing this is hard coding the entries into your HTML (view code):

var Hello = React.createClass({
    render: function() {
        return (
            <ul>
                <li>Jake</li>
                <li>Jon</li>
                <li>Thruster</li>
            </ul>
        )
    }
});

Easy enough! But what if our names were in an array, and couldn’t be hard coded into the component? In other words, how could we iterate over [‘Jake’, ‘Jon’, ‘Thruster’] and create LI’s for each of them?

Vanilla Javascript to the rescue

One of the best things about React is that doesn’t require you to learn a myriad of new methods to manipulate & render data. Instead, it relies heavily on the Javascript language itself for these common tasks. Remember that React will evaluate any Javascript expression you provide it, and this also includes arrays (it renders each array entry, starting at index 0). For those of you who are Javascript experts, you’ll know that we can use Javascript’s map method to quickly iterate over our array and create a new one with our desired values!

Not so fast though — also remember that <li>Jake</li> actually boils down to React.createElement('li', null, ‘Jake’), so our elements are actually just methods that will be executed. What this means is that we need to convert our array from [‘Jake’, ‘Jon’, ‘Thruster’] to

[React.createElement('li', null, ‘Jake’), React.createElement('li', null, ‘Jon’), React.createElement('li', null, ’Thruster’)]

— and since we’re using JSX (thank you programming gods), it would instead look super pretty: [<li>Jake</li>, <li>Jon</li>, <li>Thruster</li>].

Put that all together and you get:

var Hello = React.createClass({
    render: function() {
        var names = ['Jake', 'Jon', 'Thruster'];
        return (
            <ul>
                {names.map(function(name, index){
                    return <li key={ index }>{name}</li>;
                  })}
            </ul>
        )
    }
});

Note that we're using the 'key' attribute to ensure our elements are uniquely identified.

Our component is now programmatically listing out Jake, Jon and Thruster! You can check out the working code here!

Best practices

The last thing we’ll do is tidy our code up a bit. As your components grow in size you’ll want to abstract as much code out of the return statement as possible. This typically requires setting your desired output in variables. It’s quite simple to do this:

var Hello = React.createClass({
    render: function() {
        var names = ['Jake', 'Jon', 'Thruster'];
        var namesList = names.map(function(name){
                        return <li>{name}</li>;
                      })

        return  <ul>{ namesList }</ul>
    }
});

You can check out the working code here!

And that’s it, you’ve mastered the art of iterating & rendering loops in React! If you’re interested in learning more, this post from Jason Lee is fantastic and worth a read.

What's Next

To really dig deep into React, check out this full day workshop from Kent C Dodds on the fundamentals of react. And don't miss out on out our sale on Pro memberships as well.