3

I am using react intl ^2.4.0 version. I want to add link inside formatted message that gets translated as well. I am using this in combination with react cookie law

i tried to use something like:

const link = <a href="google.com">log in</a>;
const msg = `this website uses cookies ${link}`

but no luck. 

const cookieMsg = (
    <FormattedMessage
        id="text"
        defaultMessage="This website uses cookies LINK HERE."
    />
);

and in CookieBanner:

<IntlProvider locale={lang} messages={messages[lang]}>
    <>
        <CookieBanner
            message={msg}
            ...
        />
    </>
</IntlProvider>

Im rendering directly in app.js. Here it is:

<CookieBanner
     message={cookieMsg}
     acceptButtonText={cookieBtn}
     privacyPolicyLinkText={cookiePrivacy}
     policyLink="https://www.google.com"
     showMarketingOption={false}
     showStatisticsOption={false}
     showPreferencesOption={false}
     styles={{
              optionWrapper: {
                  display: "none"
               }
            }}
     />
youngster
  • 195
  • 1
  • 12

1 Answers1

10

you can pass link as values to FormattedMessage

const cookieMsg = (
    <FormattedMessage
        id="text"
        defaultMessage="This website uses cookies {link}."
        values={{
            link: <a href="google.com">
                <FormattedMessage
                    id="link"
                    defaultMessage="log in"
                />
            </a>
        }}
    />
);
Amit Chauhan
  • 6,151
  • 2
  • 24
  • 37
  • It is good but now it just translates link, not message. this part stays the same "this websites uses cookies" I need that translated too. If I use id from file where I store all messages and translations it removes link. – youngster Aug 22 '19 at 14:28
  • Never mind I made it. I just added new property to values. Thanks again. – youngster Aug 22 '19 at 14:33