How to set default value of Card in mui

Viewed 83

I'm using this code in MUI for drawing Card.

    <Card {...props}>
      <CardHeader title="test" style={{ textAlign: 'center' }} />
      <Divider />
      <CardContent>
        <Doughnut data={data} options={options} />
      </CardContent>
    </Card>

But sometimes, the data value can be empty, and the card will be blank. Who can help me, how can I set the default value of the Card if the data is empty? Like NoRowsOverlay on DataGrid

2 Answers
<Card {...props}>
  <CardHeader title="test" style={{ textAlign: 'center' }} />
  <Divider />
  <CardContent>
    {
       data ? (
        <Doughnut data={data} options={options} />
       ) : (
        <NoRowsOverlay />
       )
    }
  </CardContent>
</Card>

You can change data ? to whatever true/false check you need to make. Also you probably need to change <NoRowsOverlay /> to some other component you want to display instead.

You can use ??. For example: data={data ?? 'defaultValue'}.

Related