Dropdown menu to switch languages in React? - reactjs

Question

i've been trying to make a dropdown menu component on react to use on my portfolio's landing page. I need the menu to change the text on the website from english to my native language and viceversa so it should contain the options "EN" and "IT" and an image of the two flags, like in the picture i attached.
here's how it looks currently and it works too but i can't/don't know how to add the flags with the < select > element.
import React, { useContext } from "react";
import { languageOptions } from "../languages";
import { LanguageContext } from "../container/Language";
export default function LanguageSelector() {
const { userLanguage, userLanguageChange } = useContext(LanguageContext);
const handleLanguageChange = (e) => userLanguageChange(e.target.value);
return (
<select
onChange={handleLanguageChange}
value={userLanguage}
>
{Object.entries(languageOptions).map(([id, name]) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
);
}
now:
vs how i want it to look like: (https://i.stack.imgur.com/QDugw.png)
here's what's inside languageContext :
import React, { useState, createContext, useContext } from "react";
import { languageOptions, dictionaryList } from "../languages";
export const LanguageContext = createContext({
userLanguage: "en",
dictionary: dictionaryList.en,
});
export function LanguageProvider({ children }) {
const defaultLanguage = window.localStorage.getItem("rcml-lang");
const [userLanguage, setUserLanguage] = useState(defaultLanguage || "en");
const provider = {
userLanguage,
dictionary: dictionaryList[userLanguage],
userLanguageChange: (selected) => {
const newLanguage = languageOptions[selected] ? selected : "en";
setUserLanguage(newLanguage);
window.localStorage.setItem("rcml-lang", newLanguage);
},
};
return (
<LanguageContext.Provider value={provider}>
{children}
</LanguageContext.Provider>
);
}
export function Text({ tid }) {
const languageContext = useContext(LanguageContext);
return languageContext.dictionary[tid] || tid;
}
and in languageOptions :
import en from "./en.json";
import it from "./it.json";
export const dictionaryList = { en, it };
export const languageOptions = {
en: "EN",
it: "IT",
};

Answer 1

In React I don't think the option element will take an img as a child element (nor will the select element). You could use an unordered list. Crude example below.
const {useState} = React;
const languageOptions = [
{
id: "en",
name: "English",
flagimg:
"https://upload.wikimedia.org/wikipedia/commons/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg",
},
{
id: "it",
name: "Italian",
flagimg: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
},
];
const defaultLangFlag = <img src={languageOptions[0].flagimg} height="30" width="30" alt="nope" />;
const Example = () => {
const [cssDisplay, setCssDisplay] = useState('none');
const [langFlag, setLangFlag] = useState(defaultLangFlag)
const showDropdown = () => {
if (cssDisplay === 'none'){
setCssDisplay('block');
} else {
setCssDisplay('none');
}
};
const selectListItem = (event) => {
handleLanguageChange(event);
setCssDisplay('none');
setLangFlag(<img src={event.target.src} height="30" width="30" alt="nope" />)
};
const handleLanguageChange = (event) => userLanguageChange(event);
const userLanguageChange = (event) => {
console.log("Here grab event.target.id and propagate lang change to app");
}
return (
<div>
<button onClick={showDropdown} >{langFlag}</button>
<ul style={{ display: cssDisplay }}>
{languageOptions.map((lang) => (
<li id={lang.id} key={lang.id} disabled>
<img onClick={selectListItem} src={lang.flagimg} height="30" width="30" alt="flagpic" id={lang.id} />
{lang.name}
</li>
))}
</ul>
</div>
);
};
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example />
);
li {list-style: none;)
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>