How to call a function when a Card is Clicked - MERN Stack

Question

I want to call a function when the user click on a Card (I have used Card from react-bootstrap). I tried putting an onclick function but it is not working.

clientCard.js

import React from "react";
import Card from 'react-bootstrap/Card'
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
import EditOutlinedIcon from '@material-ui/icons/EditOutlined';

const clientCard = ({client}) => (

    <Card className="text-center card-mine" >
        <Card.Header>{client.clientFirstName} {client.clientLastName}</Card.Header>
        <Card.Body >
            <Card.Text >
            {client.clientContactNumber}
            <br></br>
            {client.clientEmail}
            </Card.Text>
        </Card.Body>
        <Card.Footer >
            <button className="btn btn-info ClientEditBtn">
                <DeleteOutlineIcon></DeleteOutlineIcon>
            </button>
            <button className="btn btn-info ClientDeleteBtn">
                <EditOutlinedIcon></EditOutlinedIcon>
            </button>
        </Card.Footer>
    </Card>

);

export default clientCard;

I have imported the Client card into my main file and displayed it. This is how I called the function.

<ClientCard onClick={() => {function1()}}/>

Can you please help me on how I can call a function when user clicks on the card ?

function1 is available in the same file I am calling the function (that is the main.js) — Opny Tenishia Kamalenthiran, Jul 29 '21 at 13:37
Not sure if that's what you're looking for but have you looked at this? [so thread](https://stackoverflow.com/questions/53973644/making-whole-card-clickable-in-reactstrap) — SakisTsalk, Jul 29 '21 at 13:37

score 1 · Accepted Answer · answered Jul 29 '21 at 14:15

You can pass the onClick function as a prop to the child (ClientCard) from the calling (parent) component..

const ClientCard = (props) => {
    return (
        <Card className="text-center card-mine" onClick={props.onClick}>
            <Card.Header>
                Header
            </Card.Header>
            <Card.Body>
                Body
            </Card.Body>
        </Card>
    )
};

const Example = (props) => {
  return (
    <div>
        <ClientCard onClick={()=>{alert('clicked!')}} />
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
)

react-bootstrap on Codeply

Syed Ali Shahzil · Answer 2 · 2021-07-29T17:35:37.820

0

Pass the function to props and call it

 <ClientCard passfunction={myfunction1}/>

and use it like that

    const clientCard = ({ client, passfunction }) => (
        <div onClick={() => { passfunction() }}>
            <Card className="text-center card-mine" >
                <Card.Header>Header</Card.Header>
                <Card.Body >Body</Card.Body>
                <Card.Footer >Footer</Card.Footer>
            </Card>
        </div>
    );
    
    export default clientCard;

edited Jul 29 '21 at 17:35

answered Jul 29 '21 at 14:11

Syed Ali Shahzil

1,079
1
11
17

Yes, thanks a lot, I did exactly what you told but had to pass function1 as an arrow function to props. – Opny Tenishia Kamalenthiran Jul 29 '21 at 14:20
1

Now Again check it? – Syed Ali Shahzil Jul 29 '21 at 14:24

How to call a function when a Card is Clicked - MERN Stack

2 Answers2