Make specific text to bold in json string, react-i18next-CodePudding

{ "string": "This is a bold string" }

I want to get the bold text to display it into the UI, and the string is coming from JSON file. Also, this string will be translated into another languages. Like: - i18next.t('string')

I tried using and also passing tried changing the text nature, while passing it into i18next.t.

CodePudding user response：

Trans component should be able to help you out https://react.i18next.com/latest/trans-component

CodePudding user response：

I suggest you apply the translation after formatting. Something like below.

export function App(props) {

  const { t } = useTranslation();
  let str = boldStringPart();

  return (
    //word bold is already wrapped around b tag, so translate
    <div className='App'>
       <p>{ t(str) }</p>
    </div>
  );

  function boldStringPart() {
    let myjson = { "string": "This is a bold string" };
    //at this point it is english and we add b tag around word "bold"
    let newString = myjson.string.replace('bold', '<b>bold</b>');
  }
}