How to make Card component clickable?

Question

I use the Ant Design for my WebApp. For the Card, there's a hoverable prop that make the card seams clickable but there's no onClick prop. How do I make it really clickable?

This is my Code:

import React, { Component } from 'react';
import { Card, Avatar, Icon, Button, Divider } from 'antd';
import EventDetailsDrawer from '../ui/EventDetailsDrawer';

const { Meta } = Card;

class EventCard extends Component {

render() {
    return (
        
            }
                bodyStyle={{ marginBottom: "-5px" }}
                >
                    }
                        avatar={}
                        title={this.props.title}
                        description={this.props.descp}
                    />
                    
                    {this.props.date}
                    {this.props.location}
        
                    
        
                );
            }
        }

export default EventCard

I try to make a dive (around the Card) clickable, but the Code runs immediately after the app is loaded, since I pack each card into a list item. How to make Card component clickable?

Thanks for your answer :)

user_5762943 · Answer

Notice that what you are attaching to the div's onClick listener is the value returned by alert and not actually a function that should be run whenever the div is clicked.

Try changing this:

To this:

 alert("Hello from here")}>

user_2250792 · Answer

I came here with a similar question. What worked for me is to wrap the with a component. Also, setting the hoverable property on the card will give it an effect that has it appear "clickable". For example:


   

      // ... removed for brevity...

user_4568250 · Answer

Try this, onClick expects a function, and is invoking when render() is executed.

import React, {Component} from 'react';
import {Card, Avatar, Icon, Button, Divider} from 'antd';
import EventDetailsDrawer from '../ui/EventDetailsDrawer';

const {Meta} = Card;

class EventCard extends Component {
    render() {
        return (
             {alert("Hello from here")}}>
                }
                            bodyStyle={{marginBottom: "-5px"}}
                >
                    {this.props.owner}}
                        title={this.props.title}
                        description={this.props.descp}
                    />
                    
                    
                        
                        
                        {this.props.date}
                    
                    
                        
                        
                        {this.props.location}
                    
                
                
            
        );
    }
}

export default EventCard

user_247869 · Answer

Keep in mind make a div clickable is a very bad practice in terms of accessibility, because without mouse, you cannot tab to the card nor use enter or space to click the card.

My recommendation would be wrap the card with an unstyled button, so you can take all the advantages of a button (click, tab, keyboard support)

    import React, { Component } from 'react';
    import { Card, Avatar, Icon, Button, Divider } from 'antd';
    import EventDetailsDrawer from '../ui/EventDetailsDrawer';

    const { Meta } = Card;

    class EventCard extends Component {

    render() {
        return (
            
                    );
                }
            }

    export default EventCard

css

 .unstyled-button {
       border:none;
    }

user_10904388 · Answer

maybe this will help:

youHandleClickFunc = (params) => {
console.log('you need params from Card', params)
}

render() {
        return (
           this.youHandleClickFunc(param)}/>
        )
}

user_11261557 · Answer

Since the antd Card already supports onClick, you can pass this onClick to your custom property like below:

// EventCard.js
import React from 'react';
import PropTypes from './propTypes';
import 'antd/dist/antd.css';
import { Card } from 'antd';

const { Meta } = Card;

const EventCard = ({
    myOnClick,
    ...restProps
}) => {
    return (
        }
            onClick={() => myOnClick()}
        >
            
        
    );
};

EventCard.propTypes = {
    myOnClick: PropTypes.func,
};

export default EventCard;

Where propTypes is:

// propTypes.js
import PropTypes from 'prop-types';

export default {
  ...PropTypes,
  ID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
};

Then you can use it like:

myClickHandler = (params) => {
    console.log("Click!!!");
});

render() {
    return (
         this.myClickHandler("any parameters")} />
    );
}

user_912829 · Answer

This works well for me:

  
       {
          console.log(evt.target);
          sayHi(evt);
        }}
      >
        
          
            {props.job.label}

and sayHi is

  function sayHi(props) {
    history.push({
      pathname: "/another-page/",
      state: { jobId: props.job.id },
    });
  }

user_9531503 · Answer

There is no possible, to make onClick here. You need to call an onClick event inside the Card component. Then if you need to pass some props, or use logic, just pass the function/content in the prop to Card. Something like that - <Card handleClick={this.handleClickMethod} />. Then inside Card component you can call the handleClick function.

Hope that helped you

How to make Card component clickable?

8 Answers