I create the component with the phone number

const PhoneNumber = () => {
  return (
    <div>123-456-7890</div>
  )
}

and I add it in href

<a href="tel: 123-456-789" title="Phone Number" className="transition"><PhoneNumber/></a>

how can I add in href="tel:123-456-789"

I create the component with the phone number

const PhoneNumber = () => {
  return (
    <div>123-456-7890</div>
  )
}

and I add it in href

<a href="tel: 123-456-789" title="Phone Number" className="transition"><PhoneNumber/></a>

how can I add in href="tel:123-456-789"

• reactjs

1 Answer 1

Let me explain about your problem. You can change your code as my sample below

import React from 'react';

const PhoneNumber = ({ number }) => {
  return (
    <div>{number}</div>
  );
};

export default PhoneNumber;

Code for the component

import React from 'react';
import PhoneNumber from './PhoneNumber';

const App = () => {
  const phoneNumber = "123-456-7890";

  return (
    <div>
      <a href={`tel:${phoneNumber}`} title="Phone Number" className="transition">
        <PhoneNumber number={phoneNumber} />
      </a>
    </div>
  );
};

export default App;

Code for the main functions. With my samples you can assign your phone number dynamic rather than static.