title: How to create a generic HTML element factory that takes element's name and restricts props to its prop's type
body: <p>I want to tell typescript that when I pass an element name to functional component, e.g. <code>&quot;div&quot;</code> so it knows that type of props must be of <code>React.DetailedHTMLProps&lt;React.HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;</code>.</p>
  <p>For <code>&quot;a&quot;</code> of <code>React.DetailedHTMLProps&lt;React.AnchorHTMLAttributes&lt;HTMLAnchorElement&gt;, HTMLAnchorElement&gt;</code> and so on:</p>
  <p><code>&lt;Node El=&quot;div&quot; elProps={must_be_div_props} /&gt;</code></p>
  <p><code>&lt;Node El=&quot;div&quot; elProps={{href: &quot;#&quot;} /&gt;</code> - this should trigger error<br />
  <code>&lt;Node El=&quot;a&quot; elProps={{href: &quot;#&quot;} /&gt;</code> - this is ok</p>
  <p>I tried the following:</p>
  <pre><code>import React from 'react';
  
  type SupportedTags = keyof JSX.IntrinsicElements;
  
  interface Props&lt;C extends SupportedTags&gt; {
    El: C;
    elProps: JSX.IntrinsicElements[C];
  }
  
  const Node = &lt;C extends SupportedTags&gt;({ El, elProps }: Props&lt;C&gt;) =&gt; {
    return &lt;El {...elProps} /&gt;;
  };
  </code></pre>
  <p>However, TS seems to have a problem with props unpacking <code>&lt;El {...elProps} /&gt;</code>:</p>
  <blockquote>
  <p>TS2322: Type 'IntrinsicElements[C]' is not assignable to type
  'IntrinsicAttributes &amp; LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
    Type 'DetailedHTMLProps&lt;HTMLAttributes, HTMLElement&gt; |
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;' is
  not assignable to type 'IntrinsicAttributes &amp;
  LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
      Type 'DetailedHTMLProps&lt;HTMLAttributes, HTMLElement&gt;' is not assignable to type 'IntrinsicAttributes &amp;
  LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
        Type 'DetailedHTMLProps&lt;HTMLAttributes, HTMLElement&gt;' is not assignable to type 'LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
          Type 'IntrinsicElements[C]' is not assignable to type 'LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
            Type 'DetailedHTMLProps&lt;HTMLAttributes, HTMLElement&gt; | DetailedHTMLProps&lt;HTMLAttributes,
  HTMLDivElement&gt;' is not assignable to type
  'LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.
              Type 'DetailedHTMLProps&lt;HTMLAttributes, HTMLElement&gt;' is not assignable to type 'LibraryManagedAttributes&lt;C,
  DetailedHTMLProps&lt;HTMLAttributes, HTMLDivElement&gt;&gt;'.</p>
  </blockquote>
  <p>How to make this work?</p>