title: Change to language on flag click
body: <p>I have some flag icons and I want my site to change to that specified language when clicked on that flag. How can I improve this code? How can I distinguish each id inside the  tags?</p>
  <p>I also thought of using states but I'm not quite sure how...</p>
  <pre><code>const Header = () =&gt; {
      const { t } = useTranslation();
      const lang = i18n.language;
  
      const onLanguageChangeBR = (lang) =&gt; {
          i18n.changeLanguage(&quot;pt&quot;);
      }
      const onLanguageChangeEN = (lang) =&gt; {
          i18n.changeLanguage(&quot;en&quot;);
      }
      const onLanguageChangeFR = (lang) =&gt; {
          i18n.changeLanguage(&quot;fr&quot;);
      }
      const onLanguageChangeES = (lang) =&gt; {
          i18n.changeLanguage(&quot;es&quot;);
      }
  
      return(
          &lt;header&gt;
              &lt;div className=&quot;header__bg&quot;&gt; &lt;/div&gt; 
                  &lt;div className=&quot;container header__container&quot;&gt;
                      &lt;h5&gt;{t(&quot;greetings&quot;)}&lt;/h5&gt;
                      &lt;h1&gt;{t(&quot;name&quot;)}&lt;/h1&gt;
                      &lt;h5 className=&quot;text-light&quot;&gt;{t(&quot;course&quot;)}&lt;/h5&gt;
                      &lt;CTA /&gt;
                      &lt;HeaderSocials /&gt;
  
                      &lt;div className=&quot;page__idiom&quot;&gt;
                          &lt;a href=&quot;#&quot; onClick={onLanguageChangeBR} id=&quot;flag__br&quot;&gt; 
                              &lt;ReactCountryFlag className=&quot;flag__attributes&quot; countryCode=&quot;BR&quot; svg /&gt;
                          &lt;/a&gt;
  
                          &lt;a href=&quot;#&quot; onClick={onLanguageChangeEN} id=&quot;flag__en&quot;&gt;
                              &lt;ReactCountryFlag className=&quot;flag__attributes&quot; countryCode=&quot;US&quot; svg /&gt;
                          &lt;/a&gt;
  
                          &lt;a href=&quot;#&quot; onClick={onLanguageChangeFR} id=&quot;flag__fr&quot;&gt;
                              &lt;ReactCountryFlag className=&quot;flag__attributes&quot; countryCode=&quot;FR&quot; svg /&gt;
                          &lt;/a&gt;
  
                          &lt;a href=&quot;#&quot; onClick={onLanguageChangeES} id=&quot;flag__es&quot;&gt;
                              &lt;ReactCountryFlag className=&quot;flag__attributes&quot; countryCode=&quot;ES&quot; svg /&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;language__dropdown&quot;&gt;
                      &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;
                  &lt;/div&gt;
          &lt;/header&gt;
      )
  }
  
  export default Header;
  </code></pre>