React basic 7 — Render a List from the API response

In the previous post (React basic 6 — Use Axios Library to Fetch Data), we've got image data from the Unsplash API and stored it in the React state. This post covers the basic steps to render the response in a list, such as creating an array of JSX elements from the data array.

Creating a simple list component with map function to render those images

Map in javascript allows you to alter elements of an array and create a brand new array of these altered elements retaining the original order. As shown in the below diagram, the same operation can be done using a for loop, but Map allows you to keep this operation simple and clean.

Below example code shows the real application to the image list code from the previous post. For rendering img elements, a new ImageItem component was added to this app. Map operation takes the original array of image data, and creates a new array of ImageItem components mapped with image data.

ImageList.js

import React from ‘react’;
import ImageItem from ‘./ImageItem’;
const ImageList = (props) => {
   const images = props.images.map( image => {
      return <ImageItem image = {image} />
   });