title: Typescript React - How does a parent component constrain the props types of child components
body: <p>This is parent component</p>
  <pre><code>class Form&lt;T extends Record&lt;string, any&gt;&gt; extends React.Component&lt;{
    data: T;
    children: React.ReactElement&lt;FormItem&lt;{ keys: keyof T }&gt;&gt;;
  }&gt; {
    render() {
      return &lt;div&gt;{this.props.children}&lt;/div&gt;;
    }
  }
  </code></pre>
  <p>This is child component</p>
  <pre><code>
  class FormItem&lt;T extends any&gt; extends React.Component&lt;T&gt; {
    render() {
      return &lt;div&gt;{this.props.children}&lt;/div&gt;;
    }
  }
  </code></pre>
  <p>In use</p>
  <pre><code>
  class Demo extends React.Component {
    render() {
      return (
        &lt;Form data={{ name: 'Jo', age: 24  }}&gt;
          &lt;FormItem keys=&quot;b&quot;&gt;&lt;/FormItem&gt; // keys should be 'name' or 'age'
        &lt;/Form&gt;
      );
    }
  }
  
  </code></pre>
  <p>Or, How do you design components to meet this requirement?</p>