reactjs - Adding a link/website to a button using props

Question

I am trying to get a button to link to a website using react.js but I can't seem to figure out how to get it working. From the code below everything works perfectly except for the button (props.website). Nothing happens when I click the button. What am I doing wrong?

   function Card(props){
    return(
        <MDBCol>
<MDBCard style={{ width: "22rem" }}>
  <MDBCardImage className="img-fluid" src={props.image} waves />
  <MDBCardBody>
    <MDBCardTitle>{props.name}</MDBCardTitle>
    <MDBCardText>
    {props.meaning}
    </MDBCardText>
    <MDBBtn href={props.website} >View Project</MDBBtn>
  </MDBCardBody>
</MDBCard>
</MDBCol> 
    );
}

Answer 1

From a comment on the question above:

it directs to localhost:3000/www.google.com

Then the link is actually working. But the URL is wrong. You appear to be using this URL:

'www.google.com'

But a browser has no way of knowing that this is another website. Structurally it's no different than, say, this:

'www.index.html'

Which is a perfectly valid name for a resource on your website.

To tell the browser that this should go to another website, include the protocol:

'http://www.google.com'

Or at least the // at the start to default to whatever the current page's protocol is:

'//www.google.com'