Skip to main content

React: Implementing Keys In Lists

May 11, 2020
React
Mapped arrays in React require each item to have a unique hey. This post covers why and how to implement them.
Table of Contents

Series​

This is part 2/3 in a series making a responsive masonry image grid in React, with images pulled from Unsplash using an API, queried from a text input in a small sample app.

Mapping The Array​

Let us take our ImageList component where we are passing in our array of images that we have received from the Unsplash api and then mapping it to a new array and returning it to our app.

const ImageList = (props) => {
  console.log(props.images);
  const images = props.images.map((image) => {
    return <img src={image.urls.small} />;
  });

  return <div>{images}</div>;
};

Adding Unique ID​

So far on each item in our mapped array we are just returning the URL, now let us add the ID so that each item has a key.

const ImageList = (props) => {
  console.log(props.images);
  const images = props.images.map((image) => {
    return <img key={image.id} src={image.urls.small} />;
  });

  return <div>{images}</div>;
};

export default ImageList;

It’s really that simple. The ID is a property that already exists on each item in the original array, we are now just adding it to each item in our new mapped array images.

Optional: Adding Alt Tags​

We can also easily add an alt tag to each image like so.

const ImageList = (props) => {
  
  const images = props.images.map((image) => {
    return <img key={image.id} src={image.urls.small} alt={image.description} />;
  });
  
  return <div>{images}</div>;
};

Destructuring Properties​

To clean up the function you can de-structure the properties if you wish like so.

const ImageList = (props) => {
  
  const images = props.images.map(({id, urls, description}) => {
    return <img key={id} src={urls.small} alt={description} />;
  });
  
  return <div>{images}</div>;
};

Personally I think this adds an unnecessary layer of abstraction so I would avoid this.

Comments