How to use Translate inside react-bootstrap select option

Question

I am using react-bootstrap for rendering my select dropdown and I am trying to pass a custom element to the options. I need to display translated values in the dropdown:

<Form.Label ><Translate id="labels.sortKey" /></Form.Label>
<Form.Control as="select" value={props.sort.key} onChange={(e) => props.sortAction(e.target.value)}>
        <option value="name"><Translate id="basic.name" /></option>
        <option value ="state"><Translate id="basic.state" /></option>
</Form.Control>

Unfortunately, this renders as [Object object] instead of the translated value and I get an error Only strings and numbers are supported as <option> children.

Is there some alternative element that I could use instead of <option> that supports custom elements without the need to use some third-party library?

EDIT:

The following code (which is pretty much identical with the code from the official docs) throws an exception translate is not a function:

<Translate>
    {translate =>
     <h1>{ translate('test') }</h1>
    }
</Translate>

HI, is that Translate component yours or are you using a package (if yes, which one)? — knightburton, Apr 30 '19 at 15:10

knightburton · Accepted Answer · 2019-05-02T10:11:37.267

3

Based on the react-localize-redux docs (translate function), try to wrap your whole Form.Control inside the Translate component and then use the translate function.

<Translate>
  <Form.Control
    as="select"
    value={props.sort.key}
    onChange={(e) => props.sortAction(e.target.value)}
  >
    <option value="name">
      {{ translate } => translate("basic.name")}
    </option>
    <option value="state">
      {{ translate } => translate("basic.state")}
    </option>
  </Form.Control>
</Translate>

edited May 02 '19 at 10:11

answered Apr 30 '19 at 21:33

knightburton

1,114
9
22

That looks interesting. Unfortuntately, it does not work - perhaps some syntax error? This particular piece of code does not render and if I play with brackets, it only gives me "missing translation id: for language en". It seems that it is not using the provided translation id. – Smajl May 01 '19 at 13:54
If you are using single id insted of a nested one the error is the same? – knightburton May 02 '19 at 10:12
This code doesn't compile with the double brackets: `{{ translate } => ... }`. If I use `{ translate => translate("name")}`, it still returns missing translation with empty ID – Smajl May 02 '19 at 10:32
1

I played a little with the brackets and finally got to a working solution. Thank you very much for pointing me in the right direction – Smajl May 02 '19 at 13:52
@Smajl could you share your solution please ? I have the exact same kind of issue – sam Mar 21 '20 at 17:39

score 1 · Answer 2 · answered Jul 11 '19 at 10:02

I hope, this notes would save someone time. knightburton's answer does not work in my case. Maybe that's because I imported react-jhipster's transelate function. here is code

import { Translate, translate } from 'react-jhipster';

...

<AvField id="type" type="select" className="form-control">
  <option className="form-control" value="01">
    { translate("type1") }
  </option>
  <option className="form-control" value="02">
    { translate("type2") }
  </option>
</AvField>

score 0 · Answer 3 · answered Oct 28 '21 at 16:10

If you are using reactjs and for your language translation you choose to use (react-il8n) package just do this:

This is your dropdown component file.

import React, { useState } from "react";
import il8n from "./i18n.js";
import { withNamespaces } from "react-i18next";

const LanguageDropdown = ({ t, props }) => {
  const changeLanguage = (language) => {
    il8n.changeLanguage(language);
  };

  return (
    <li className="nav-item d-none d-md-block">
      <a className="nav-link" href="javascript:void(0)">
        <div className="customize-input">
          <select
            className="custom-select form-control bg-white custom-radius custom-shadow border-0"
            onChange={(e) => changeLanguage(e.target.value)}
          >
            <option value="">{t("Choose Language")}....</option>
            <option value="en">{t("English")}</option>
            <option value="fe">{t("French")}</option>
          </select>
        </div>
      </a>
    </li>
  );
};

export default withNamespaces()(LanguageDropdown);

How to use Translate inside react-bootstrap select option

3 Answers3