How to make the whole Card component clickable in Material UI using React JS?

Question

Im using Material UI Next in a React project. I have the Card component which has an image(Card Media) and text(Card Text) inside it. I also have a button underneath the text. M

Answer 1

Just wrap the whole thing in the Material CardActionArea component. Everything inside of it will be clickable.

<CardActionArea>
   <CardMedia>
   .......Image Stuff
   </CardMedia>
   <CardContent>
   .......Content
   </CardContent>
</CardActionArea>

Answer 2

With Material UI 4.9.10, this works.

<Card>
    <CardActionArea href="https://google.com">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

If you're using react router, this also works.

<Card>
    <CardActionArea component={RouterLink} to="/questions">
        <CardContent>
            <Typography>Click me!</Typography>
        </CardContent>
    </CardActionArea>
</Card>

Answer 3

You could add an onClick={clickFunction} to the containing div of the card that links to the same function as the button.

Answer 4

Update for v3 — 29 of August 2018

A specific CardActionArea component has been added to cover specifically this case in version 3.0.0 of Material UI.

Please use the following solution only if you are stuck with v1.

What you probably want to achieve is a Card Action (see specification) on the top part of the card.

The Material Components for Web library has this as its first usage example for the Card Component.

You can easily reproduce that exact behaviour by composing MUI Card* components with the mighty ButtonBase component. A running example can be found here on CodeSandbox: https://codesandbox.io/s/q9wnzv7684.

The relevant code is this:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';

const styles = {
  cardAction: {
    display: 'block',
    textAlign: 'initial'
  }
}

function MyCard(props) {
  return (
    <Card>
      <ButtonBase
          className={props.classes.cardAction}
          onClick={event => { ... }}
      >
        <CardMedia ... />
        <CardContent>...</CardContent>
      </ButtonBase>
    </Card>
  );
}

export default withStyles(styles)(MyCard)

Also I strongly suggest to keep the CardActions component outside of the ButtonBase.

Answer 5

Here is the solution that worked for us, thanks to https://stackoverflow.com/a/50444524/192092

import { Link as RouterLink } from 'react-router-dom'
import Link from '@material-ui/core/Link'

<Link underline='none' component={RouterLink} to='/your-target-path'>
  <Card>
    <CardActionArea>
      ...
    </CardActionArea>
  </Card>
</Link>

Answer 6

Just add onPress props in your card

 <Card
                          onPress = {() => {console.log('onclick')}}
                          style={styles.item}
                          status="basic"
                          header={(headerProps) =>
                            this.renderItemHeader(headerProps, item)
                          }>
                          <Text>{item.description}</Text>
                        </Card>