Map JavaScript Object Keys Using React

Sep 16, 2020 • 4 Minute Read

Introduction

When writing any web app using React, you will most likely find yourself needing to map over the keys of a JavaScript object. If you have just fetched remote data from the server then there is a high probability that, at some point, you will need to map across this data in order to populate your view layer. In this guide, you will learn how to map over a JavaScript object's keys in a variety of ways so that you can choose the solution that will work the best for your app.

Let's get started!

Using Pure JavaScript

Let's say that you are fetching a list of dogs from a remote API and that the JSON payload looks like this:

      
    {
        breed: 'German Shepherd'

As you can see, this payload consists of an array of objects. What if you want to dynamically display a table in your React view using each object's keys as the column headers? This solution requires that you map over an object's keys.

ES6 JavaScript provides a built-in method for this—Object.keys. This method takes in an object and returns an array of keys. Here is an example of how you could populate a simple table using this built-in method:

      render() {
    const firstDog = Array.isArray(this.dogs) && this.dogs.length ? this.dogs[0] : {};

    const headers = Object.keys(firstDog);

    return (
        <table class="table">
            <tr>
                { headers.map(header => <th>{header}</th>) }
            </tr>
            { this.dogs.map(dog => {
                return <tr>{ headers.map(header => <td>{dog[header]}</td>) }</tr>
              }) }
        </table>
    );
}
    

The render function for the above React component uses Object.keys to map over the available keys of the first dog object. These keys are then used to generate the <th> and <td> elements of the table. This is a naive example but it shows the power and usefulness of the built-in Object.keys method.

Using Lodash

Apart from the built-in method, it is easy to use an external library like Lodash to help you map over an object's keys. Lodash provides the _.keys method for mapping over an object's keys. There is a slight overhead in terms of performance that you will encounter by using this method, but it is also more succinct. Below, you will find the same render function refactored to utilize _.keys instead.

      render() {
    const headers = _.keys(_.head(firstDog));

    return (
        <table class="table">
            <tr> { _.map(headers, header => <th>{header}</th>) } </tr>
            { _.map(this.dogs, dog => {
                    return <tr>{ _.map(headers, header => <td>{dog[header]}</td>) }</tr>;
                }) }
        </table>
    );
}
    

The code above uses Lodash's _.keys function to map over the first dog in our data. These keys are then used to dynamically populate our table with columns and rows. The _.keys function is slightly less performant than the built-in Object.keys method, however, it is considerably more readable—especially when used with other Lodash methods.

Conclusion

In this guide, you learned how to map over a JavaScript Object's keys in a variety of ways. First, you discovered how to implement a solution using pure JavaScript so that you can avoid adding any unnecessary dependencies into your app. You learned how to use the built-in Object.keys function to map over your object primitives and display the underlying data within in an iterative fashion. After this, you learned how to utilize the Lodash libraries' _.keys method in order to map over your object keys by writing very succinct, albeit slightly less performant, code.

I hope that this guide has helped you to understand how to iterate over a JavaScript Object's keys and how you can utilize these solutions to create compelling views using React.