title: Why would this HOC class not return a rendered child component in React?
body: <p>I have the following code that wraps a function for providing context to child components, however, when I try to render this, it fails, my wrapped component doesn't render, in React 16.6.3</p>
  
  <pre><code>import React from 'react'
  
  export const WishlistContext = React.createContext(null)
  
  
  const AddToWishListButtonWrapper = (WrappedComponent) =&gt; {
    return class WishlistButton extends React.Component {
      state = {token: null, wishlistItems: []}
      render() {
        const {token, wishlistItems} = this.state
        return (
          &lt;WishlistContext.Provider value={wishlistItems}&gt;
            &lt;WrappedComponent {...this.props} /&gt;
          &lt;/WishlistContext.Provider&gt;
        )
      }
    }
  }
  
  export default AddToWishListButtonWrapper
  </code></pre>
  
  <p>Then in my other component it looks like this: </p>
  
  <pre><code>import AddToWishListButtonWrapper from 'src/components/wishlist_button'
  </code></pre>
  
  <p>...</p>
  
  <pre><code>      &lt;AddToWishListButtonWrapper&gt;
          &lt;WishlistButton&gt;
            {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
          &lt;/WishlistButton&gt;
        &lt;/AddToWishListButtonWrapper&gt;
  </code></pre>
  
  <p>This renders nothing, however, if I make the following change to lowercase with my import in my component and my JSX, the wrapped component renders, while none of the lifecycle methods are triggered, which is baffling.</p>
  
  <pre><code>import addToWishListButtonWrapper from 'src/components/wishlist_button'
  
            &lt;addToWishListButtonWrapper&gt;
              &lt;WishlistButton&gt;
                {'   '}{wishlistSuccess ? 'Added!' : 'Add to Wishlist'}
              &lt;/WishlistButton&gt;
            &lt;/addToWishListButtonWrapper&gt;
  </code></pre>