Home.js

function Home() {
  const { language, setLanguage } = useContext(UserLanguageContext);

  const [selectedLanguage, setSelectedLanguage] = useState(language);

  const onLanguageChange = (e) => {
    const l = e.target.value;
    setSelectedLanguage(l);
    I18n.setLanguage(l);
    setLanguage(l);
    localStorage.setItem("lang", l);
  };
  
  return (
    <section id="mainSection">
      <p>{I18n.get("mainTitle")}</p>
      <p>{I18n.get("secondaryTitle")}</p>
      <p>
        Go to <Link to="about">About Us</Link>
      </p>
      <div className="ml-10 space-x-4">
        <select
          id="language"
          name="language"
          onChange={onLanguageChange}
          value={selectedLanguage}
        >
          <option label="EN" value="en"></option>
          <option label="IT" value="it"></option>
        </select>
      </div>
    </section>
  );
}