I am still learning JavaScript, React and GatsbyJS.
I have difficult to readjust the dropdowm menu list (ul > li > input label > ul > li), replicating the original codes of @Smakosh's gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx which is options selection (select > option) because of value={lang} onChange={e => selectLanguage(e.target.value)} that the list does not have. I wanted to use data-aria, but I do not use Bootstrap and jQuery.
The original codes of gatsby-starter-i18n/src/components/theme/Header/SelectLanguage.jsx:
const SelectLanguage = ({ selectLanguage, lang }) => (
<select value={lang} onChange={e => selectLanguage(e.target.value)}>
<option value="en">English</option>
<option value="es">Español</option>
<option value="de">Deutsch</option>
<option value="ar">عربي</option>
<option value="pt">Português</option>
</select>
)
I tried to readjust it to the list (dropdown) based on codepen.io/Tont/pen/hdsev:
const SelectLanguage = ({ selectLanguage, lang }) => (
<li>
<Input id="languages" type="checkbox" name="menu" href={lang} onChange={e => selectLanguage(e.target.value)}/>
<Label for="languages">Languages</Label>
<Submenu className="submenu">
<li><a href="en">English</a></li>
<li><a href="es">Español</a></li>
</Submenu>
</li>
)
The original codes of gatsby-starter-i18n/blob/master/src/components/theme/Header/index.jsx:
const Header = () => (
<Context.Consumer>
{({ toggleLanguage, lang }) => (
<StyledHeader>
<Navbar as={Container}>
<Links>
{/* ... */}
<SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
</Links>
</Navbar>
</StyledHeader>
)}
</Context.Consumer>
)
I changed the codes based on that pen:
const Header = () => (
<Context.Consumer>
{({ toggleLanguage, lang }) => (
<StyledHeader>
<Navegador id="menu">
<li>
<Links>
{/* ... */}
<SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
</Links>
</li>
</Navegador>
</StyledHeader>
)}
</Context.Consumer>
)
Gustavo Benedito Costa
Deaf-born, computer science student and language lover
Hello Rana Emad, here is my question. I am very sorry for my noobieness!