title: REACT: Undesirable arrows inside html <select>
body: <p>SOLUTION: as @prasanth sugested me, I created a fake dropdown, a placeholder.
  Both the fake and the real dropdown shares a</p>
  
  <pre><code>style={{"display":countryChange?"":"none"}}
  </code></pre>
  
  <p>obviously the real one is inverted with the fake one. Once i ping the api, I hide the real one and show the fake one. Once the api returns with value, i write the state so the fake disapears. Worked like a charm.</p>
  
  <p>I'm new to react, and trying to make a dynamic dropdown based on an api call. I have a local api in "/avaliable_countries" which returns {countries:"Brasil" and "United States"}. I want those two fields to create the <code>&lt;options&gt;</code> dynamcially, and it is almost working as intended.</p>
  
  <p>The problemis: In the first click, I got this weird arrows. If I click out/again or two times, then it becomes normal.</p>
  
  <p>no click:</p>
  
  <p><a href="https://i.stack.imgur.com/avUbw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/avUbw.png" alt="enter image description here"></a></p>
  
  <p>first click, weird arrows(and using the weird arrows  can navigate between the two countries):</p>
  
  <p><a href="https://i.stack.imgur.com/BJnGM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJnGM.png" alt="enter image description here"></a></p>
  
  <p>Clicking in/out or two times in a row, becomes the desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/2pKlA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2pKlA.png" alt="enter image description here"></a></p>
  
  <p>Without any CSS(weird arrows still here):
  <a href="https://i.stack.imgur.com/qb6xg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qb6xg.png" alt="enter image description here"></a></p>
  
  <p>The code:</p>
  
  <pre><code>import React,{useState} from 'react';
  import {Link} from 'react-router-dom';
  import './styles.css';
  import api from '../../services/api';
  
  export default function Signup(){
      var [countriesObj, setCountriesObj] = useState(&lt;option&gt;Select your country&lt;/option&gt;)
      async function getAvaliableCountries(){
          setCountriesObj();
          try{
              const response = await api.get(
                  'avaliable_countries','',
                  {headers: {
                      'Content-Type':"application/json",   
                  }        
                  });
                  window.arrayOfCountries = response.data.countries ; 
                  let countriesList = (window.arrayOfCountries.map((data) =&gt;
                  &lt;option&gt;
                      {data}
                  &lt;/option&gt;)               
              );
              setCountriesObj(countriesList);
          }catch(err){
              alert('Error obtaining the list of countries.')
          }
      }
  
  
      return(
          &lt;div className="wrapper"&gt;
              &lt;div id="formContent"&gt;        
              &lt;h2 className="inactive underlineHover"&gt; 
              &lt;Link to="/"&gt;Sign In&lt;/Link&gt;
              &lt;/h2&gt;
              &lt;h2 className="active"&gt;                
              Sign Up
              &lt;/h2&gt;     
              &lt;form&gt;
                  &lt;select
                  onClick={getAvaliableCountries}
                  name="animal"
                  className="form-control"&gt;
                  {countriesObj}
                  &lt;/select&gt;    
              &lt;/form&gt;    
              &lt;div id="formFooter"&gt;                   
              &lt;/div&gt;        
          &lt;/div&gt;
          &lt;/div&gt;
      );
  }  
  </code></pre>