title: Rendering components from an Object instead of endless comparing
body: <p>I am trying to replace this kind of code:</p>
  <pre><code>    {component === 'Benchmark' &amp;&amp; &lt;Benchmark /&gt;}
      {component === 'DiskSpace' &amp;&amp; &lt;DiskSpace /&gt;}
      {component === 'MainFeature' &amp;&amp; &lt;MainFeature /&gt;}
      {component === 'Scanning' &amp;&amp; &lt;Scanning /&gt;}
      {component === 'Uninstaller' &amp;&amp; &lt;Uninstaller /&gt;}
  </code></pre>
  <p>With an object like so:</p>
  <pre><code>const components = {
    Benchmark: Benchmark,
    DiskSpace: DiskSpace,
    MainFeature: MainFeature,
    Scanning: Scanning,
    Uninstaller: Uninstaller,
  }
  </code></pre>
  <p>So that I can do:</p>
  <pre><code>export const Card: React.FC&lt;CardProps&gt; = ({ component, title, backgroundImg, ...props }) =&gt; {
    const Component = components[component]
  
    return (
      &lt;CardContainer {...props}&gt;
          &lt;Component /&gt;
      &lt;/CardContainer&gt;
    )
  }
  </code></pre>
  <p>In both cases components are being imported the same way, no change in the way I am importing them at all.</p>
  <p>The first way with the <code>===</code> and <code>&amp;&amp;</code> is working just fine, however the second way throws errors:</p>
  <p>When building:</p>
  <pre><code>  ReferenceError: Cannot access 'Benchmark' before initialization
  </code></pre>
  <p>When running and trying to render:</p>
  <pre><code>Warning: React.jsx: type is invalid -- expected a string (for 
  built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed 
  up default and named imports.
  </code></pre>
  <p>But these exact same imports work with the first kind of code, so how could it be importing issue!</p>
  <p>Also I have the exact same pattern in another part of my app, and its working just fine there.</p>
  <p>Logging the <code>components</code> object gives everything as <code>undefined</code> <code>console.log(components);</code>:</p>
  <pre><code>{
    Benchmark: undefined,
    DiskSpace: undefined,
    MainFeature: undefined,
    Scanning: undefined,
    Uninstaller: undefined
  }
  </code></pre>
  <p>Logging an individual component <code>console.log(Benchmark);</code> works just fine:</p>
  <pre><code>[Function: Benchmark]
  </code></pre>
  <p>I just figured that if I put it within the component it works:</p>
  <pre><code>export const Card: React.FC&lt;CardProps&gt; = ({ component, title, backgroundImg, ...props }) =&gt; {
    const components = {
      Benchmark: Benchmark,
      DiskSpace: DiskSpace,
      MainFeature: MainFeature,
      Scanning: Scanning,
      Uninstaller: Uninstaller,
    }
  
    const Component = components[component]
  
    return (
      &lt;CardContainer {...props}&gt;
        {backgroundImg &amp;&amp; &lt;CardBackgroundImg {...backgroundImg} /&gt;}
        &lt;CardTitle value={title} /&gt;
        &lt;CardContents&gt;{Component &amp;&amp; &lt;Component /&gt;}&lt;/CardContents&gt;
      &lt;/CardContainer&gt;
    )
  }
  </code></pre>
  <p>^ This works, however, I want the components object to be outside of the component, and as I have already mentioned, I have that exact same pattern used for rendering the sections on my page and it works just fine, with the <code>components</code> section outside of the component that is being rendered.</p>