onClick event not working with <option> tag. How to use onClick event with select option tag. Each option must be given a different parameter.
async function localization(language) {
localStorage.setItem("language", language);
}
useEffect(() => {
localization(localStorage.getItem("language"));
}, []);
return(
<select>
<option onClick={() => localization("ru")}>
<RussinFlagIcon /> Ru
</option>
<option onClick={() => localization("uz")}>
<UzbekistanFlagIcon /> Uz
</option>
<option onClick={() => localization("en")}>
<UKFlagIcon /> En
</option>
</select>
)
Use onChange instead, it's how you should be working when it comes to <select>. You can do something like this:
Notice
valueattribute on<option>. The selected option's value will be the value of the<select>.
return(
<select onChange = {(e)=> localization(e.target.value)}>
<option value = "ru">
<RussinFlagIcon /> Ru
</option>
<option value= "uz">
<UzbekistanFlagIcon /> Uz
</option>
<option value="en">
<UKFlagIcon /> En
</option>
</select>
)
Normally the select is used with a [form][1], then you should use the onChange callback:
const Select = () => {
const handleChange = (e) => localStorage.setItem("language", e.target.value);
return (
<label>
<select name="languages" onChange={handleChange}>
<option onClick={() => localization("ru")}>
<RussinFlagIcon /> Ru
</option>
<option onClick={() => localization("uz")}>
<UzbekistanFlagIcon /> Uz
</option>
<option onClick={() => localization("en")}>
<UKFlagIcon /> En
</option>
</select>
</label>
);
};
Then some comments about your code:
async function localization does not have to be async if you don't have a Promise in it.