react-i18next: Wrong tag guessing in Trans component

I have one React component that involves translation within tags so I use <Trans> component to perform the translation, but apparently it’s not detecting the tags properly and rendered a glitched translation. My component have one link but it was rendered in <strong> tag, and tag <0> was repeated instead of rendering the <strong> tag. Could it be the guessing being shifted in some way?

// ...
import { translate, Trans } from 'react-i18next';

const NoChangeRow = ({ t, feed, user }) => (
  <Tooltip title={t('no_change_row_tooltip')}>
    <div style={{ whiteSpace: 'pre-wrap' }}>
      <Trans i18nKey="feed_no_change">
        Data <strong>no change</strong>. No update is performed.
        Please click
        <a
          href=""
          onClick={e => {
            e.preventDefault();
          }}
        >
          Force Update
        </a>
        .
      </Trans>
    </div>
  </Tooltip>
);
// ...
{
  "feed_no_change": "Data <0>no change</0>. No update is performed. Please click <1>Force Update</1>. ",
}

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 22 (11 by maintainers)

Most upvoted comments

Tag numbers are basically index of react components children passed to Trans component