Using the map method of array I am creating card components iterating the state in my container. I want to arrange the cards in rows vertically with only 3 cards in each row.
This is the ContentCard functional component :
import React from "react";
import CardLogo from "./../../../Assets/CardLogo.PNG";
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle, Button } from "reactstrap";
import classes from "./ContentCard.module.css";
const contentCard = props => (
<Card className={classes.ContentCard}>
<CardImg src={CardLogo} />
<CardBody>
<CardTitle>
<b>{props.title}</b>
</CardTitle>
<CardSubtitle>from ₹{props.price}</CardSubtitle>
<CardText>
Typically 450-400 words, an e-book is perfect for your target audience ranging from
prospective customers to users
</CardText>
<Button>Order</Button>
</CardBody>
</Card>
);
export default contentCard;
This is the ContentCards Parent Component which reuses the ContentCard Component. How should I style the cards which I get after iterating the state in this component to arrange them as I said above.
import React, { Component } from "react";
import classes from "./ContentCards.module.css";
import ContentCard from "./ContentCard/ContentCard";
class ContentCards extends Component {
state = {
content: [
{ title: "Blog / Article", price: "500" },
{ title: "Newsletter / Emailer", price: "1000" },
{ title: "Whitepaper", price: "2000" },
{ title: "e-book", price: "1000" },
{ title: "Report-Guide", price: "1000" },
{ title: "Product Description", price: "500" },
{ title: "Website Content", price: "1000" },
{ title: "Video Script", price: "1000" },
{ title: "Company Profile / Brochure", price: "2000" },
{ title: "Press Realise", price: "2000" }
]
};
render() {
let card = this.state.content.map(cnt => (
<ContentCard key={cnt.title} title={cnt.title} price={cnt.price} />
));
return <div className={classes.ContentCards}>{card}</div>;
}
}
export default ContentCards;