Making whole card clickable in Reactstrap

Question

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.

Answer 1

Note that adding onClick on the Card component is enough to make it clickable. Changing the cursor through style makes it more obvious to the user.

<Card onClick={onClick} style={{ cursor: "pointer" }}>
  <CardBody>This is a clickable card.</CardBody>
</Card>

Wrapping the card with an a tag will also work, though, it won't have the pointer cursor without a href which can be changed easily with CSS.

const SiteCard = ({ site, siteSelectedCallback }) => (
  <a style={{ cursor: 'pointer' }} onClick={siteSelectedCallback}>
    <Card className="card-item">
      <CardBody>
        <CardTitle>{site.name}</CardTitle>
        <CardText className="text-muted">{site.address}</CardText>
      </CardBody>
    </Card>
  </a>
);

Tested it just now with a console.log, so if that doesn't work, it's because the callback isn't working as you're expecting it to.

---

Another way would be to make the Card an a tag by passing a tag prop.

<Card tag="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>

All the options available are clearly defined in the source of the reactstrap's Card component.

---

I also tested with a button inside the Card without any problems.

Answer 2

In case anyone arrives here for the same question, but with react-bootstrap's Card, the solution is very similar. However, instead of using the tag property, you need to use as.

<Card as="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>