How to make props button link clickable? - react-router

Question

I have a React card component as in the code below:
import React from "react";
class Cardlist extends React.Component {
render() {
return(
<div className="cardlist">
<div className="cardlist-body">
<h2>{this.props.title}</h2><br/>
<p>{this.props.text}</p><br/><br/>
<button className="button-49">{this.props.btnlink}</button>
</div>
</div>
)
}
}
export default Cardlist;
import React from "react";
import Cardlist from "./Cardlist";
const Services = () => {
return(<section id="services">
<div class="servicesContainer">
<div class="servicesContent">
<Cardlist title="Pain Management" text="We offer patients the very best pain medications and treatments. We advise our patients to seek treatment for their chronic pain and learn that management is possible with the right tools [...]" btnlink ="Read More"/>
</div>
<div class="servicesContent">
<Cardlist title="Dermatology" text="The compounding pharmacist prepares therapies customized for the individual patient for a very wide range of dermatological conditions. Such skin conditions can spell not only physical di [...]" btnlink ="Read More"/>
</div>
<div class="servicesContent">
<Cardlist title="Pediatric" text="Children and medications often times just do not mix. Children often resist taking a medication because they don’t like the taste. Swallowing pills is often difficult for younger children [...]" btnlink ="Read More"/>
</div>
<div class="servicesContent">
<Cardlist title="Hormone Replacement Therapy" text="Children and medications often times just do not mix. Children often resist taking a medication because they don’t like the taste. Swallowing pills is often difficult for younger children [...]" btnlink ="Read More" />
</div>
</div>
</section>);
}
export default Services;
Clearly, as you can see I can't pass a link to btnlink ="Read More". When is the best and easiest way to assign every button its own LINK (external or internal link)?
You can see the design on live website: http://fusionrxny.com

Answer 1

you need a onClick listener on your button element
import React from "react";
class Cardlist extends React.Component {
handleClick = () => {
// this will open your link in new tab
window.open(this.props.linkUrl, '_blank');
}
render() {
return(
<div className="cardlist">
<div className="cardlist-body">
<h2>{this.props.title}</h2><br/>
<p>{this.props.text}</p><br/><br/>
<button className="button-49" onClick={this.handleClick}>{this.props.btnlink}</button>
</div>
</div>
)
}
}
export default Cardlist;
or you can replace your button element with a link element
import React from "react";
class Cardlist extends React.Component {
render() {
return(
<div className="cardlist">
<div className="cardlist-body">
<h2>{this.props.title}</h2><br/>
<p>{this.props.text}</p><br/><br/>
<a className="button-49" href={this.props.linkUrl}>{this.props.btnlink}</button>
</div>
</div>
)
}
}
export default Cardlist;
you would provide different urls like this
import React from "react";
import Cardlist from "./Cardlist";
const Services = () => {
return(<section id="services">
<div class="servicesContainer">
<div class="servicesContent">
<Cardlist
title="Pain Management"
text="We offer patients the very best pain medications and treatments. We advise our patients to seek treatment for their chronic pain and learn that management is possible with the right tools [...]"
btnlink ="Read More"
linkUrl='your url to more info on Pain Managment'
/>
</div>
<div class="servicesContent">
<Cardlist
title="Dermatology"
text="The compounding pharmacist prepares therapies customized for the individual patient for a very wide range of dermatological conditions. Such skin conditions can spell not only physical di [...]"
btnlink ="Read More"
linkUrl='your url to more info on Dermatology'
/>
</div>
<div class="servicesContent">
<Cardlist
title="Pediatric"
text="Children and medications often times just do not mix. Children often resist taking a medication because they don’t like the taste. Swallowing pills is often difficult for younger children [...]"
btnlink ="Read More"
linkUrl='your url to more info on Pediatric'
/>
</div>
<div class="servicesContent">
<Cardlist
title="Hormone Replacement Therapy"
text="Children and medications often times just do not mix. Children often resist taking a medication because they don’t like the taste. Swallowing pills is often difficult for younger children [...]"
btnlink ="Read More"
linkUrl='your url to more info on Hormone Replacment Terapy'
/>
</div>
</div>
</section>);
}
export default Services;