title: How to use generics in props in React in a functional component?
body: <p>In a class based component, I can easily write some code like this:</p>
  
  <pre><code>import * as React from 'react';
  import { render } from 'react-dom';
  
  interface IProps&lt;T&gt; {
      collapsed: boolean;
      listOfData: T[];
      displayData: (data: T, index: number) =&gt; React.ReactNode;
  }
  
  class CollapsableDataList&lt;T&gt; extends React.Component&lt;IProps&lt;T&gt;&gt; {
      render () {
          if (!this.props.collapsed) {
              return &lt;span&gt;total: {this.props.listOfData.length}&lt;/span&gt;
          } else {
              return (
                  &lt;&gt;
                      {
                          this.props.listOfData.map(this.props.displayData)
                      }
                  &lt;/&gt;
              )
          }
      }
  }
  
  render(
      &lt;CollapsableDataList
          collapsed={false}
          listOfData={[{a: 1, b: 2}, {a: 3, b: 4}]}
          displayData={(data, index) =&gt; (&lt;span key={index}&gt;{data.a + data.b}&lt;/span&gt;)}
      /&gt;,
      document.getElementById('root'),
  )
  </code></pre>
  
  <p>Actually this <code>CollapsableDataList</code> component should be a functional component because it's stateless, but I can't figure out how to write a function component and use generics in props, any advise for me?</p>