How to display react-intl translation result for href?

Question

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;

Answer 1

You can provide function as child component:

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

Answer 2

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.