How to use translation __() with hyperlinks

Question

While creating a block in WordPress, I'll need to add a translation with a link inside. I'm doing this way in JS, but it isn't providing expected results:

import { render } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default function Final() {

    let d = <a href="https://example.com">bothered me.</a>;

    return (

        <p>  { __( 'The cold never {d} anyway.', 'text-domain' ) } </p>

    )
}

document.addEventListener( "DOMContentLoaded", function(event) {
    const appRoot = document.getElementById( 'root' );

    if ( appRoot ) {
        render(
            <Final/>,
            appRoot
        )
    }
});

In PHP, I could easily do that with sprintf and using placeholder like %1s.

echo sprintf(
    __( 'The cold never %1s anyway', 'text-domain' ),
    '<a href="https://example.com">bothered me.</a>'
);

How do I do the equivalent of sprintf when creating a block in react?

Answer 1

You are attempting to insert a html tag inside a translated sentence using React. You will need to keep a placeholder (something like {0}) and then you will need to replace it with the actual component.

When with PHP you are simply replacing text with other text (that is your HTML), in react you are using components so you can not simply replace them.

export default function Final() {
    const [before, after] = __('The cold never {0} anyway.', 'text-domain').split('{0}');
    
    return (<p>
        { before }
        <a href="https://example.com">bothered me.</a>
        { after }
    </p>);
}

Side note

This 'The cold never {d} anyway.' is a plain string, maybe you intended `The cold never ${d} anyway.` (for string templating).

Answer 2

Another way is using sprintf built-in with @wordpress/i18n

import { render } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';

export default function Final() {
    let d = '<a href="https://example.com">bothered me.</a>';
    let txt = sprintf(__('The cold never %1s anyway.', 'text-domain'), d);
    return (
      <p dangerouslySetInnerHTML={{__html: txt }}></p>
    )
}

Answer 3

Try to use template strings(ES6):

export default function Final() {

    let d = <a href="https://example.com">bothered me.</a>;

    return (

        <p>  { __( `The cold never ${d} anyway.`, 'text-domain' ) } </p>

    )
}

Similar Question