How to add HTML tags to a localization message in React?

When it comes to localizing messages in React, there may be situations where you need to include HTML tags in the message to add emphasis, create links, or make other formatting changes.

Here's an example of using a link in a localized message. This example uses the react-intl localization library, but many other localization libraries likely support using HTML tags within messages as well.

The localization message:

"common.learn-more": "<Link>Learn more</Link>"

The usage in the code:

const intl = useIntl();
const message = intl.formatMessage({ id: "common.learn-more" }, { 
  Link: (str) => <a href="https://example.com">{str}</a> 
});