CODEWITHSUNDEEP
javascriptphpreactjswordpressjsx
micky
micky

Reputation: 317

How to use translation __() with hyperlinks

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?

Upvotes: 13

Views: 1529

Answers (3)

emptyhua
emptyhua

Reputation: 6692

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>
    )
}

Upvotes: 1

Dmitry Leiko
Dmitry Leiko

Reputation: 4382

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

Upvotes: 1

Newbie
Newbie

Reputation: 4819

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).

Upvotes: 3

Related Questions