title: How to create a generic React component with a typed context provider?
body: <p>With React's new context API, you can create a typed context producer/consumer like so:</p>
  
  <pre><code>type MyContextType = string;
  
  const { Consumer, Producer } = React.createContext&lt;MyContextType&gt;('foo');
  </code></pre>
  
  <p>However, say I have a generic component that lists items.</p>
  
  <pre><code>// To be referenced later
  interface IContext&lt;ItemType&gt; {
      items: ItemType[];
  }
  
  interface IProps&lt;ItemType&gt; {
      items: ItemType[];
  }
  
  class MyList&lt;ItemType&gt; extends React.Component&lt;IProps&lt;ItemType&gt;&gt; {
      public render() {
          return items.map(i =&gt; &lt;p key={i.id}&gt;{i.text}&lt;/p&gt;);
      }
  }
  </code></pre>
  
  <p>If I instead wanted to render some custom component as the list item and pass in attributes from <code>MyList</code> as context, how would I accomplish that? Is it even possible?</p>
  
  <hr>
  
  <p>What I've tried:</p>
  
  <h3>Approach #1</h3>
  
  <pre><code>class MyList&lt;ItemType&gt; extends React.Component&lt;IProps&lt;ItemType&gt;&gt; {
      // The next line is an error.
      public static context = React.createContext&lt;IContext&lt;ItemType&gt;&gt;({
          items: []
      }
  }
  </code></pre>
  
  <p>This approach doesn't work because you can't access the class' type from a static context, which makes sense.</p>
  
  <h3>Approach #2</h3>
  
  <p>Using the standard context pattern, we create the consumer and producer at the module level (ie not inside the class). The problem here is we have to create the consumer and producer before we know their type arguments.</p>
  
  <h3>Approach #3</h3>
  
  <p>I found <a href="https://medium.com/@nicolas.schabram/thanks-for-the-article-that-was-helpful-861454c1d06f" rel="noreferrer">a post on Medium</a> that mirrors what I'm trying to do. The key take away from the exchange is that we can't create the producer/consumer until we know the type information (seems obvious right?). This leads to the following approach.</p>
  
  <pre><code>class MyList&lt;ItemType&gt; extends React.Component&lt;IProps&lt;ItemType&gt;&gt; {
      private localContext: React.Context&lt;IContext&lt;ItemType&gt;&gt;;
  
      constructor(props?: IProps&lt;ItemType&gt;) {
          super(props);
  
          this.localContext = React.createContext&lt;IContext&lt;ItemType&gt;&gt;({
              items: [],
          });
      }
  
      public render() {
          return (
              &lt;this.localContext.Provider&gt;
                  {this.props.children}
              &lt;/this.localContext.Provider&gt;
          );
      }
  }
  </code></pre>
  
  <p>This is (maybe) progress because we can instantiate a provider of the correct type, but how would the child component access the correct consumer?</p>
  
  <hr>
  
  <h3>Update</h3>
  
  <p>As the answer below mentions, this pattern is a sign of trying to over-abstract which doesn't work very well with React. If a were to try to solve this problem, I would create a generic <code>ListItem</code> class to encapsulate the items themselves. This way the context object could be typed to any form of <code>ListItem</code> and we don't have to dynamically create the consumers and providers.</p>