How do I use the react-i18next <Trans> named tags?

0
votes

I am trying to implement the Trans tag format described here. However, whenever I try to copy the example, almost verbatim, the result is that the tag names appear on the page and the inner content does not.

Here is a link to my sample project.

Thanks!

1
i18nextreact-i18next

1 Answers

1
votes

Pay attention to the fact that Trans component accepts an object as components prop.

In your example you've passed a string.

class App extends Component {
  render() {
    const { t, i18n } = this.props;
    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
    };
    return (
      <div className="App">
        <div className="App-header">
          <h2>{t("Welcome to React")}</h2>
          <button onClick={() => changeLanguage("de")}>de</button>
          <button onClick={() => changeLanguage("en")}>en</button>
        </div>
        <Trans
          i18nKey="userMessagesUnread"
          values={{ name: "Greg", count: "30" }}
          components={{ bold: <strong />, italic: <i /> }}
          // --------^
        ></Trans>
      </div>
    );
  }
}

A working example