CODEWITHSUNDEEP
javascriptreactjstranslationjsxreact-intl
Mo.
Mo.

Reputation: 27445

How to display react-intl translation result for href?

Is there any option to show contact number as <a class="footer__links--contact--phone" href="tel:+44 1234 1234 12"> in react-int ?

import React from 'react';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
    const ContactList = () => (
      <div className="footer__links--contact">
        <pre>{JSON.stringify(messages.phone)}</pre>
        <a className="footer__links--contact--phone" href={`tel:${messages.phone}`}>
          <FormattedMessage {...messages.phone} />
          <p className="footer__opening-hours">
            <FormattedMessage {...messages.availability} />
          </p>
        </a>
      </div>
    );
    export default ContactList;

enter image description here

Upvotes: 0

Views: 1282

Answers (2)

Alexander Dark
Alexander Dark

Reputation: 48

You can provide function as child component:

    <FormattedMessage {...messages.phone}>
       {phone => (
         <a className="footer__links--contact--phone" href={`tel:${phone}`}>
           {phone}
         </a>
       )}
     </FormattedMessage>

Upvotes: 2

Ricardo Pierre-Louis
Ricardo Pierre-Louis

Reputation: 184

Does this line correctly display the telephone?

<pre>{JSON.stringify(messages.phone)}</pre>

If so then I believe you also have to apply the same logic to the href tag because of how the template string is converting the object to a string.

<a className="footer__links--contact--phone" href={`tel:${JSON.stringify(messages.phone)}`}>

Also be sure that you are using the correct format for the international prefix. The examples given in the w3 docs use dashes instead of spaces so that may be something to consider as well.

Upvotes: 0

Related Questions