I'm trying to create a card that, when clicked, performs an action.
I've managed to make this work by adding a button to the card, which is bound to an event handler, and works as expected.
I'm trying to get the whole card to work with the same event handler, as opposed to using the button, but I can't seem to get this to work as I would expect.
const SiteCard = props => {
const { site, siteSelectedCallback } = props;
return (
<Card onClick={siteSelectedCallback} className="card-item">
<CardBody>
<CardTitle>{site.name}</CardTitle>
<CardText className="text-muted">{site.address}</CardText>
<Button color="primary" className="float-right" value={site.id}>
CHOOSE ME
</Button>
</CardBody>
</Card>
);
};
I've tried wrapping it in an <a>
tag, but that also doesn't work.
With the example, I'd expect the card to be clickable, but actually the button still works with the event handler. I've also tried removing the button, but that doesn't make the card clickable.