My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

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