title: Passing Generics to function component React Typescript
body: <p>I was just wondering if there is a way of handling this with generics than using any for the following.</p>
  <p>I am still trying to wrap my head around the types and generics, just wanted to stay clear of using any. Or would this be an acceptable use case of using any !</p>
  <pre><code>SlotRenderer.tsx
  
  // Can this be done ? 
  interface SlotAProps&lt;T&gt; {
      slotData : T[]
  }
  
  // Should I stick with
  interface SlotAProps {
      slotData : any[]
  }
  
  const SlotRenderer = (props: SlotAProps) =&gt; {
      return (
          &lt;div&gt;
              &lt;p&gt;Renders slot&lt;/p&gt;
              // for version 1 I could do, currently this throws an error
              &lt;p&gt;{props.slotData[0]?.validity}&lt;/p&gt;
              // for version 2 I could do, currently this throws an error
              &lt;p&gt;{props.slotData[0]?.totalPrice}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>The available types are</p>
  <pre><code>interface SampleOne {
      id: number;
      name: string;
      validity: string;
      isVisible: boolean;
  }
  
  interface SampleTwo {
      id: number;
      required: true
      sampleString: string;
      totalPrice: number;
  }
  </code></pre>
  <p>The execution would be</p>
  <p>// Version 1</p>
  <pre><code>const Container = () =&gt; {
      return (
          &lt;ComponentBase
              // Passes a component to the Base component
              slot={&lt;SlotRenderer&lt;SampleOne&gt; slotData={[{ id: 1, name:'', validity:'', isVisible:'' }]} /&gt;} 
          /&gt;
      )
  }
  </code></pre>
  <p>// Version 2</p>
  <pre><code>const ContainerTwo = () =&gt; {
      return (
          &lt;ComponentBase
              // Passes a component to the Base component
              slot={&lt;SlotRenderer&lt;SampleTwo&gt; slotData={[{ id: 1, required:true, sampleString:'', totalPrice:10 }]} /&gt;} 
          /&gt;
      )
  }
  </code></pre>