title: React - dynamic use of country-flag-icons library
body: <p>We are using <a href="https://www.npmjs.com/package/country-flag-icons" rel="nofollow noreferrer">https://www.npmjs.com/package/country-flag-icons</a> library that allows to use flags icon in React in this way:</p>
  <pre><code>import Flags from 'country-flag-icons/react/3x2'
  
  &lt;Flags.US title=&quot;United States&quot; className=&quot;...&quot;/&gt;
  </code></pre>
  <p>But how can i use it dynamically? Because the State code is returned through services.</p>
  <p>I mean a some solution like this:</p>
  <pre><code>&lt;Flags.{myVar} title=&quot;United States&quot; className=&quot;...&quot;/&gt;
  </code></pre>
  <p><strong>EDIT</strong>
  This is my file:</p>
  <pre><code>import { Link } from &quot;react-router-dom&quot;;
  import Flags from &quot;country-flag-icons/react/3x2&quot;;
  
  const Person = ({ linkDetail, flagNationCode }) =&gt; (
    &lt;Link to={linkDetail}&gt;
     
      &lt;div className=&quot;person-footer&quot;&gt;
        &lt;div className=&quot;info&quot;&gt;
          &lt;div className=&quot;label&quot;&gt;{flagNationCode}&lt;/div&gt;
          &lt;div className=&quot;value&quot;&gt;
              &lt;Flags.US /&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Link&gt;
  );
  
  export default Person;
  </code></pre>