Question 171942 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can React Bootstrap create Buttons?

Can anyone tell me how to add telephone number to the react bootstrap buttons, when clicking should call that number.
I have used div tags and link to make it look like a button. what I want to do is to make the button work the in the same way as anchor tag

code :

         <div className='phone-no'>
            <Link className='link-phone-no' to='tel:+12-345-678-89089'>
              +12-345-678-89089
            </Link>
          </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding Link to Button with phone number

    This method can make the button acts as a link component with clicking can go to a contact no we entered. The first set of button code is for mui v5 and second set of code is for react-bootstrap

    import these components first:

        import { Button } from 'react-bootstrap';
    import { Button } from '@mui/material';
    import { Link } from 'react-router-dom';

    import {BrowserRouter} from "react-router-dom"; --- index.js file before calling App component add BrowserRouter component

        <BrowserRouter>
      <App />
    </BrowserRouter>

    mui:

    
    <Button
     component={Link}
     to="tel:+91-97875-97431"
     variant="contained"
     size="medium"
    >
    +91-97875-97431
    </Button>


    react-bootstrap:

        

    <Button
        as={Link}
        to="tel:+91-97875-97431"
        variant="contained"
        color="success"
        size="large"
        >
        +91-97875-97431
        </Button>

  2. 0

    As I can see that import {Button} from 'bootstrap_path'; And then use it having path binded with an onclick event listener that will call the function.
    You may use useref hook to get the desired values with it.

    <Button onclick={function_name} ref={myref}>some text{number}</Button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search