title: How to render one array item based on name props in React
body: <h2>Brief description</h2>
  
  <p>Thanks to previous help been able to render multiple icon components in my React project. Except I don't want to have them all rendered at once, but just the one I am calling based on a name prop.
  <br/><br/>
  I am a bit confused as to where I have to pass props to achieve what I want. I have tried to work with a 'switch/case' as you can see in title '<strong>What I tried</strong>', but I don't know how loop multiple cases.</p>
  
  <h2>What I have</h2>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Icon from  './library/icons/Icon';
  class App extends Component {
      render() {
          return (
                 &lt;div className='App'&gt;
                     &lt;Icon iconName='Icon1' /&gt;
                  &lt;/div&gt;
          );
      }
  }
  export default App;
  </code></pre>
  
  <p><strong>Icon.js</strong></p>
  
  <pre><code>import React from 'react';
  import * as icons from './icons' 
  
  function IconList({iconName}) {
  
      const GetIcons = [];
      for (const [name, icon] of Object.entries(icons)) {
          GetIcons.push({name, icon})
      }
      const MapIcons = GetIcons.map(({name, icon}) =&gt; {
          return (
              &lt;div&gt;{name} {icon()}&lt;/div&gt;
          )
      });
      console.log(GetIcons)
      return (
          &lt;div&gt;{MapIcons}&lt;/div&gt;
      )
  }
  const Icon = ({iconName}) =&gt; (
      &lt;IconList /&gt;
  );
  
  export default Icon;
  </code></pre>
  
  <h2>What this does</h2>
  
  <p>This now renders <strong>all</strong> my SVG icon components that I import. My <strong>MapIcons</strong> arrow function loops and renders the name of the components and the function that renders the svg icon.</p>
  
  <h2>What I want to achieve</h2>
  
  <ul>
  <li>Call only one icon based on the iconName prop (as shown in App.js)</li>
  <li>Have a list of props like 'fill='currentColor' that I pass to my icons.</li>
  </ul>
  
  <h2>What I tried</h2>
  
  <p>I tried to loop inside a Switch so that I had each function as a case. But I already didn't know what to do to pass the props to the function.</p>
  
  <pre><code>function IconList({}) {
  
      const GetIcons = [];
      for (const [name, icon] of Object.entries(icons)) {
          GetIcons.push({name, icon})
      }
      const SwitchIcons = (iconName, props) =&gt; {
          switch (iconName) {
              const MapIcons = GetIcons.map(({name, icon}) =&gt; {
                  case {name}:
                      return (
                          {icon()}
                      )
              });
          }
      )
  }
  
  const Icon = ({
    iconName = '',
    stroke = 'currentColor',
    strokeLinecap = 'round',
    strokeLinejoin = 'round',
    strokeWidth = '3px',
    fill = 'currentColor',
    viewBox = '0 0 100 100',
    width = '100px',
    className = 'icon icon' + name,
    height = '100px'
  }) =&gt; (
    &lt;div className={className}&gt;
     {SwitchIcons(iconName, { stroke })}
    &lt;/div&gt;
  );
  
  export default Icon;
  </code></pre>