在 React 中设置下拉列表的默认值

Question

I have an array like [ {code: 'in', name: 'India' }, ...] for all countries and rendered a dropdown list with all countries as option using map . I want to set India as default value when the component renders but I always get Argentina as default option because it is first on the array. Please suggest me a way to achieve it. I tried finding answers but those are not working or may be I'm doing something wrong. Here is the code required:

export default function NavBar({ setUserSearch, country, setCountry }) {

    const handleCountryChange = (e) => {
        setCountry({code: e.target.value, name: e.target.innerText})
    }

    return (
        <select className="country_dropdown mx-3 py-1 px-1 text-dark" onChange = {handleCountryChange}> 
            {countries.map(country => {
                 return <option value = {country.code} key = {country.code}>{country.name} 
                        </option>
                       }
                  )
             }
        </select>
           ) 
}

Answer 1

option has an attribute called "selected", which is a boolean setting.
So you can do this -

<select className="country_dropdown mx-3 py-1 px-1 text-dark" onChange = {handleClick}> 
   {countries.map(country => {
      return <option value={country.code} key={country.code} selected={country.code === 'in'}>
                {country.name}
             </option>
   })}
</select>

Let me know if this works out for you.