putting message in dropdownlist in react
I am calling an API
and output of that API
I am putting on the dropdown list.
These are the country code
in my drop down list. I want to put default message in drop down like
.
"Please select the country code" once user click then he can select countrycode. here by default EF is selected. in place of EF
I want to put message.
Below output
I am putting on the list
.
componentDidMount() {
axios.get(`http://localhost:8080/country_code`).then((res) => {
const countryData = res.data;
this.setState({ countryData });
alert(countryData);
});
}
dropdown
code
<select
name="countriesValue"
value={this.state.countriesValue}
onChange={this.selectCountryCode}
>
{this.state.countryData.map((countryData) => (
<option key={countryData} value={countryData}>
{countryData}
</option>
))}
</select>
method:-
selectCountryCode(e) {
e.preventDefault();
this.setState({ countriesValue: e.target.value });
}
state
variable
this.state = {
countryCode: '',
countryData: [],
countriesValue: '',
};
what mistake I am doing in my select
Edit1:-
<select
name="countriesValue"
value={this.state.countriesValue}
onChange={this.selectCountryCode}
>
<option value="" selected disabled hidden>
Please select the country code
</option>
{this.state.countryData.map((countryData) => (
<option key={countryData} value={countryData}>
{countryData}
</option>
))}
</select>
After including this line
<option value="" selected disabled hidden>
Please select the country code </option>
once user select the dropdown this Please select the country code
does not appear again
To add a default value to the <select>
element, you can add a disabled and hidden option like the following:
<select
name="countriesValue"
value={this.state.countriesValue}
onChange={this.selectCountryCode}
>
<option value="" selected disabled hidden>Please select the country code</option>
{this.state.countryData.map((countryData) => (
<option key={countryData} value={countryData}>
{countryData}
</option>
))}
</select>