Concurrent Mode - Image List

ImageList.js

import React from 'react';

const ImageList = (props) => {
  const { resource, pending } = props;
  const images = resource.read();

  let listContainerStyles = {
    background: pending ? '#ccc' : 'transparent',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: "wrap",
    justifyContent: "center",
    marginTop: "2em"
  }

  return (
    <div style={listContainerStyles}>
      {images.map((photo) => (
        <div key={photo.id} style={{ marginRight: "1em", marginBottom: "1em" }}>
          <h2>{photo.id}</h2>
          <img src={photo.thumbnailUrl} />
        </div>
      ))}
    </div>
  );
};

export default ImageList;