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.

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.

• javascript
• reactjs
• twitter-bootstrap
• reactstrap

• Wrap the card with an <a onClick...> tag? – Emile Bergeron Commented Dec 29, 2018 at 22:42
• @EmileBergeron that doesn't make it clickable either - I'd expect that to work too, but it doesn't seem to. – jmo Commented Dec 29, 2018 at 22:54
• It should work, though without a href on the link, the cursor won't change. – Emile Bergeron Commented Dec 29, 2018 at 23:05
• @EmileBergeron having a href changes the cursor and underlines the text, but clicking still doesn't do anything. I've tried it with and without a href and neither works – jmo Commented Dec 29, 2018 at 23:08
• 1 I've tested 2 different ways of making it work with an a tag in my answer, in which I provide the code sandbox where you can play around with my examples. – Emile Bergeron Commented Dec 29, 2018 at 23:23

2 Answers 2

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.

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" }}>