title: Use Generic flow types in React component Props and instantiate generic component>
body: <p>I have a Flow generics vs React Components issue, which I haven't been able to find the answer to, on google.</p>
  
  <p>I want to make a generic component with props that takes generic arguments, and instantiate that in a render() method. No luck so far - my minimal example code is here:</p>
  
  <p><a href="https://flow.org/try/#0JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChyB6CuAEWE0ySIDt41cQVmATAZzkzQ43eoxZsIrJAA8YvUjACeYJHAAKKRSCSsAwhy584AXgJhN+OAB8CRAFZIS1ggFdmL3km5klKuLpRYfRBOHn5TfDQAC0cAawgXGEsbfCRwJTJyX1Vg0O4AHlzDABVlJAA+EzgAb1IASA8mAEluAC44XhgoYGYAcwAaUjg4OvYQw3ainlKVQYBfSmo1HDB+ABskeBgYuDHIZh0tlFjVEQYmQ7hs-ghMXYMwhTL1Fd5Ch+4Ziqra0Y-eSYfd7jaZlcoAbQAuqQFos4MUdlNuAAhRIwST8PaSS68KIJNbcOAAI1UjUJgigHR0Ij6cAAboFgAlMf9hEgVDwer04JJ7lJZAA6UhoNYoXj8JGomDo5hvJFfSoyGDU-jIdAwAXBfaHfLLCCrYF5BWVX4sbhMAAUAEoakNhvaiDAXFBmHALXbhnV8iI6eV6nU6siADIAQWDIY99uG+QoPr9UajVsjC1hVDgUrgzAgcDWLjQsTgPULspgXBgwBQ5dpKA6KjQ9GAaCuz1uV0RHylMv4vR0TEb-Q62cwgWFGPgGi0h0laIxVWtJkqNUdztd0+lGN1mm0en+5Vh2XUW6nklLPSYetWPzgjSgLXanW6tIWIrF-An25g+lYKDPlKVKsQYgNS1bFWE3Scd2-X8L14E16jNS0bVqNN7TqZcXTdUgUM9L040NQxOw3d9jxBPhKjGPJeGMapwWqG87zgABGAcKLydp8HMRR8DmAc6M8W82gAJhYj52PsRwkjmSE5jgChyhjOMsOoBNhiTKM0M2FdMPU3DgF9cCPzXLt7lIqjqjgWj6LaJiRJCNizAsHiais1phJM+zCCQBwSCkuAZLkhS9PjFS4DU+0U1IIA" rel="nofollow noreferrer">Try it out</a></p>
  
  <pre class="lang-javascript prettyprint-override"><code>import React from 'react'
  
  
  // Different commands for different contexts
  type PaymentCommands = 'pay' | 'reject' | 'unused'
  type CartCommands = 'checkout' | 'empty'
  
  
  type Command&lt;CommandType&gt; = {
    userId: string,
    command: CommandType,
  }
  
  // Props let the component take different types of commands
  type Props&lt;CommandType&gt; = {
    commands: Command&lt;CommandType&gt;[]
  }
  
  
  // The CommandButtons component should be used for sending various commands depending on context.
  class CommandButtons&lt;CommandType&gt; extends React.Component&lt;Props&lt;CommandType&gt;&gt; {
    render() {
      return (
        &lt;div&gt;
          BLABLA
        &lt;/div&gt;
      )
    }
  }
  
  // But no luck in instantiating a specific type of the CommandButtons generic, so far
  const PaymentCommandButtons = () =&gt;  {return CommandButtons&lt;PaymentCommands&gt;}
  
  type PaymentContainerProps = { userId: string }
  class PaymentContainer extends React.Component&lt;PaymentContainerProps&gt; {
    render() {
  //      return (
  //          &lt;div&gt;&lt;CommandButtons&lt;PaymentCommands&gt; commands={[{userId: 1, commmand: 'pay'}, {userId:2, command: 'reject'}]} /&gt;&lt;/div&gt;
  //        )
      return (
         &lt;div&gt;&lt;PaymentCommandButtons commands={ [{userId: 1, commmand: 'pay'}, {userId:2, command: 'reject'}] } /&gt;&lt;/div&gt;
      )
    }
  }
  </code></pre>