Making a react component clickable

I have a functional REACT component, code is as follows

const MobileListing = (props) => {

    function handleClick() {
        console.log('in cardClick');
    } 
    return (
        <div>
            <Row>
                <Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
                </Card>
            </Row>
        </div>
    );
}

export default MobileListing;

I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn’t work for me. Can someone help me understand what I am doing wrong?

A card looks like this on my site and I want to make the whole card clickable.

Answer

You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.

such like:

        <div>
            <Row>
              <div onClick={handleClick}>
                <Card style={{ width: '18rem', cursor : 'pointer' }} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
                </Card>
              </div>
            </Row>
        </div>

Advertisement

Answer