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=";>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=";>bothered me.</a>'
);

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

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.">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.">bothered me.</a>'
);

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

• javascript
• php
• reactjs
• wordpress
• jsx

Share Improve this question Follow edited Sep 28, 2021 at 12:48 micky asked Sep 27, 2021 at 15:03 mickymicky 31711 gold badge1515 silver badges4343 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

When with PHP you are simply replacing text with other text (that is your HTML), in react you are using ponents 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.">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).

Try to use template strings(ES6):

export default function Final() {

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

    return (

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

    )
}

Similar Question

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.">bothered me.</a>';
    let txt = sprintf(__('The cold never %1s anyway.', 'text-domain'), d);
    return (
      <p dangerouslySetInnerHTML={{__html: txt }}></p>
    )
}