Map JavaScript Object Keys Using React

JavaScript object keys are the names used to identify and access the properties within an object. They are like labels that point to the associated values. Imagine an object as a box with different compartments labeled with names. These names are the object keys.

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 tutorial, we 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.

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',
        age: 10
    },
    {
        breed: 'Labrador Retriever',
        age: 5
    }
]

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>
    );
}

In this guide, you learned how to map over a JavaScript Object's keys in a variety of ways.

#javascript #react