Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

247
Views
onClick event not working with option tag in React

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>
    )
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Use onChange instead, it's how you should be working when it comes to <select>. You can do something like this:

Notice value attribute 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>
)
about 4 years ago · Juan Pablo Isaza Report

0

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:

  • Your async function localization does not have to be async if you don't have a Promise in it.
  • And your useEffect does not do much except store the language in the localStorage based on the localStorage value ... [1]: https://www.w3schools.com/TAGS/att_select_form.asp
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!