Unable to render link using react-intl

Question

const msgid =
  'Not all item(s) could be added to your <a title="Cart" href="http://localhost:4502/homepage.html" target="_blank">Cart</a>. Please review error(s) below. ';
const msg =
  'Not all item(s) could be added to your <a title="Cart" href="http://localhost:4502/homepage.html" target="_blank">Cart</a>. Please review error(s) below. ';

<FormattedMessage id={msgid} defaultMessage={msgid}>
  {data => <span dangerouslySetInnerHTML={{ __html: data }} ></span>}
</FormattedMessage>

Version: "react-intl": "^5.20.13",

Only text is displayed without the link. Why?

Answer 1

The id supposed to be a string of a key instead of a variable. Therefore, to fix your issue, you need to simply update your code with the following

<FormattedMessage id={'msgid'} defaultMessage={msg}>
  {(data) => <span dangerouslySetInnerHTML={{ __html: data }}></span>}
</FormattedMessage>

See your code in action here: https://codesandbox.io/s/sharp-frost-76fsxl?file=/src/App.tsx

Read more about FormattedMessage component: https://formatjs.io/docs/react-intl/components/#formattedmessage