CODEWITHSUNDEEP
reactjstypescriptbootstrap-4
Dvir Shahala
Dvir Shahala

Reputation: 95

Why I do not use correct Card in react bootstrap?

I am beginner in react.

I am traying to use Card from bootstrap like this:

import React from "react";
import { Card, Button } from "@material-ui/core";


const ProtfolioSection: React.FC = () => {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src="src/img/background.png" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
};

export default ProtfolioSection;

I got an error:

Property 'Img' does not exist on type '(props: CardProps) => Element'.ts(2339)

Property 'Body' does not exist on type '(props: CardProps) => Element'.ts(2339)

and so on..

Someone know how to fix it and to handle this? Thanks.

Upvotes: 1

Views: 109

Answers (1)

Titulum
Titulum

Reputation: 11466

You are importing from @material-ui/core, not from react-bootstrap.

Here is how to get it working with material-ui:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

export default function MediaCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

Here is how to get it working with react-bootstrap:

import React from 'react';
import { Card, Button } from 'react-bootstrap';

export const PortfolioSection: React.FC = () => {

    return <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
            </Card.Text>
            <Button variant="primary">Go somewhere</Button>
        </Card.Body>
    </Card>
}

Upvotes: 1

Related Questions