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.
Advertisement
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>