Sign in
Log inSign up

How to readjust the dropdowm menu list, replicating the original codes of options selector in React JavaScript?

Gustavo Benedito Costa's photo
Gustavo Benedito Costa
·Aug 15, 2020·

3 min read

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>
)

Source

8