CODEWITHSUNDEEP
reactjsmaterial-ui
DDStackoverflow
DDStackoverflow

Reputation: 643

CardHeader is not rendering in React

I'm playing with React and material-ui, other stuff have worked but for some reason <CardHeader> is not getting rendered. Below is the code 

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/Card";
import CardContent from "@material-ui/core/Card";
import CardActions from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Typography from "material-ui/Typography";

class PaperCard extends React.Component {
  render() {
    return (
      <Card>
        <CardHeader title="CaHellord" subheader="Test ME" />
        <CardContent>
          <Typography type="title">Word of the day</Typography>
          <Typography type="headline" component="h2">
            impediments
          </Typography>
          <Typography component="p">adjective</Typography>
        </CardContent>
        <CardActions>
          <Button dense> Learn More </Button>
        </CardActions>
      </Card>
    );
  }
}

export default PaperCard;

Could someone point out the obvious which I have missed.

Upvotes: 3

Views: 2250

Answers (1)

Madhu Bhat
Madhu Bhat

Reputation: 15173

It's just the case of incorrect import.

Replace the import of CardHeader from 

import CardHeader from "@material-ui/core/Card";

to

import CardHeader from "@material-ui/core/CardHeader";

Upvotes: 4

Related Questions