title: Create inputs based on type keys
body: <p>So, I want to create a component which will create some inputs, needed for creating an entity in the back-end.</p>
  <p>For this, I have two ideas:</p>
  <p>1st</p>
  <pre><code>Create a component which takes a type as a prop
  Pass the type to the prop
  Iterate over its keys
  For each key, create an input
  </code></pre>
  <p>For this approach, my component looks like this:</p>
  <pre><code>import { Type } from &quot;typescript&quot;;
  
  type Props = {
      dataType: Type
  }
  
  export default function CreateRow(props: Props) {
    return (
      &lt;div&gt;//iteration over keys&lt;/div&gt;
    );  
  }
  </code></pre>
  <p>and the component would be called like this:</p>
  <pre><code>import type {EducatieItem} from './EducatieItem';
  
          &lt;CreateRow dataType={EducatieItem}/&gt;
  </code></pre>
  <p>but this doesn't work. I get</p>
  <pre><code>'EducatieItem' only refers to a type, but is being used as a value here.
  </code></pre>
  <p>EducatieItem is</p>
  <pre><code>export type EducatieItem = {
      id: string,
      name: string
  };
  </code></pre>
  <p>The other idea was to create a generic component, like this:</p>
  <pre><code>export default function CreateRow&lt;T&gt;() {
    return (
      &lt;div&gt;//iteration over keys&lt;/div&gt;
    );  
  }
  </code></pre>
  <p>and the call:</p>
  <pre><code>        &lt;CreateRow&lt;EducatieItem&gt;/&gt;
  </code></pre>
  <p>this doesn't throw any error... yet.</p>
  <p>If I actually try to iterate over the keys of T, then I will get the same error as before.</p>
  <p>Is there any way to achieve what I want? Are any of my approaches valid though?</p>
  <p>Thanks.</p>