title: TypeScript/React - Mapping over av array of objects
body: <p>I am trying to map over an array of objects received from the <a href="https://unsplash.com/documentation#search-photos" rel="nofollow noreferrer">Unsplash</a> API. I have read a bit about <a href="https://www.typescriptlang.org/docs/handbook/interfaces.html" rel="nofollow noreferrer">indexers</a> in TypeScript but i am not sure i understand it completely. I have a stateless React component which receives a prop of state from parent. The value is a array of object. (see example from unsplash API). How do i define the shape of the object received from the API?</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>interface IProps {
      images: [{}];
  }
  
  interface IIMageUrls {
      image: {
          urls: { regular: string}
      }   
      [index: string]: any;
  }
  
  export default class ImageList extends React.Component&lt;IProps, {}&gt; {
      constructor(props: IProps) {
          super(props);
      }
  
      render() {
          this.props.images.map((image: IIMageUrls) =&gt; {
              return &lt;img src={image.urls.regular} /&gt;
          });
      }
  }
  </code></pre>
  
  <p><strong>Example of the unsplash JSON</strong>:</p>
  
  <pre><code>{      
    "results": [       
        "urls": {
          "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
          "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
          "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;s=92f3e02f63678acc8416d044e189f515",
          "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;s=263af33585f9d32af39d165b000845eb",
          "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;fit=max&amp;s=8aae34cf35df31a592f0bef16e6342ef"
        }
     ]
  }
  </code></pre>
  
  <p><strong>Solution/Final Code:</strong></p>
  
  <pre><code>interface IImageUrls {
      [index: string]: string;
      regular: string;
  }
  
  interface IImage {
      urls: IImageUrls;
  }
  
  interface IProps {
      images: Array&lt;IImage&gt;;
  }
  
  export default class ImageList extends React.Component&lt;IProps, {}&gt; {
      constructor(props: IProps) {
          super(props);
      }
  
      render() {
          const images = this.props.images.map((image, index) =&gt; {
              return &lt;img src={image.urls.regular} key={index} /&gt;;
          });
          return images;
      }
  }
  </code></pre>