title: Using TypeScript To Create A React Stateless Functional Component That Accepts Array
body: <p>So I want to create a react component  in typescript, imagelist, that displays a list of images, links and numbers. </p>
  
  <p>My json looks something like this </p>
  
  <pre><code>{   "_id": "59c8ead6411f1e56f498a71b",   "images": [
      {
        "post_url": "http://www.Facebook.com/974",
        "image_url": "http://placehold.it/32x32",
        "count": 887
      },
      {
        "post_url": "http://www.Facebook.com/711",
        "image_url": "http://placehold.it/32x32",
        "count": 749
      }   ] }
  </code></pre>
  
  <p>I have a dashboard component that looks like this </p>
  
  <pre><code>import * as React from 'react'; 
  const fakeData = require('./fake_data.json'); 
  import ImageList from './ImageList';
  
  export default class Dashboard extends React.Component {   render() {
      return (
        &lt;div&gt;
          &lt;ImageList data={fakeData.images} /&gt;
        &lt;/div&gt;
      );   } }
  </code></pre>
  
  <p>I have tried to define my imagelist component as follows </p>
  
  <pre><code>import * as React from 'react';
  
  interface ImageListValue {
    post_url: string;
    image_url: string;
    count: number;
  }
  
  interface ImageListProps {
    data: ImageListValue[];
  }
  
  const ImageList = ({ data }: ImageListProps) =&gt; {
    return data.map(item =&gt; {
      return (
        &lt;div key={item.post_url}&gt;
          &lt;a href={item.post_url}&gt;{item.post_url}&lt;/a&gt;
          &lt;img src={item.image_url} /&gt;
          &lt;h1&gt;item.count&lt;/h1&gt;
        &lt;/div&gt;
      );
    });
  };
  
  export default ImageList;
  </code></pre>
  
  <p>There linter shows no problems in the ImageList component, but in the Dashboard component I get the following message. </p>
  
  <pre><code>JSX element type 'Element[]' is not a constructor function for JSX elements.
    Property 'render' is missing in type 'Element[]'.
  [ts] JSX element class does not support attributes because it does not have a 'props' property.
  </code></pre>
  
  <p>I'm not sure what this error message means. My first thought was that I needed to use a SFC type definition as described [here][1]
    [1]: <a href="https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011" rel="nofollow noreferrer">https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011</a> . </p>
  
  <p>I changed my code to this </p>
  
  <pre><code>const ImageList: React.SFC&lt;ImageListProps&gt; = ({data}) =&gt; {
    return data.map(item =&gt; {
      return (
        &lt;div key={item.post_url}&gt;
          &lt;a href={item.post_url}&gt;{item.post_url}&lt;/a&gt;
          &lt;img src={item.image_url} /&gt;
          &lt;h1&gt;item.count&lt;/h1&gt;
        &lt;/div&gt;
      );
    });
  };
  </code></pre>
  
  <p>and received another error</p>
  
  <pre><code>[ts]
  Type '({ data }: ImageListProps &amp; { children?: ReactNode; }) =&gt; Element[]' is not assignable to type 'StatelessComponent&lt;ImageListProps&gt;'.
    Type 'Element[]' is not assignable to type 'ReactElement&lt;any&gt; | null'.
      Type 'Element[]' is not assignable to type 'ReactElement&lt;any&gt;'.
        Property 'type' is missing in type 'Element[]'.
  const ImageList: React.StatelessComponent&lt;ImageListProps&gt;
  </code></pre>
  
  <p>I'm new to typescript and feel like I am missing some key things. Any ideas? </p>