How to create a dynamic grid in react.js? - reactjs

Question

I'm trying to make a responsive grid system in react.js
I want to show 3 cards in a row. Each card consists of 4 columns.
But I want to make only 1 component which will render my cards and show them on screen. But i'm unable to make the logic of dynamically showing these cards in a row as a row contains only 3 cards. After that next row will start
Here is my card Component code
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
const INNERCARD = (props) => {
return (
<Container>
<Row>
<Col md={3}>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
};
export default INNERCARD;```

Answer 1

I got this working with a little bit of tinkering. Never used reactstrap before, so it was fun to play around with it a bit. First you need to also install bootstrap into your project, not sure if you knew that or not. Then you need to include the bootstrap css file in your index.js file.
So I am using a freshly installed CRA app. The top of my index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
So once you have Bootstrap installed and imported it, then you can play around with reactstrap, assuming that is also installed. I learned from the docs that you want <Row xs={3}> if you want 3 cards per row.
So here is my full App.js file that works with any number of cards and shows 3 per row:
import './App.css';
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';
function App() {
// obviously I am just hard-coding in a random number here. This is where
// you would have a call to an API or something where you would get all
// your card data from, ideally that API call would return an array of data
// and then you could just map over that array to output the card data
// down below in the render section
const numberOfCards = 11;
return (
<div className="App">
<Container>
<Row xs={3}>
{[...Array(numberOfCards)].map((e, i) => {
return (
<Col>
<Card>
<CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
<CardBody>
<CardTitle tag="h5">Card title #{i+1}</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the
card's
content.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
)
})}
</Row>
</Container>
</div>
);
}
export default App;
Forgot to include what it looks like! Here it is!

Answer 2

//Mapping over the Bootstrap Card and then displaying them in the Grid formate
import React from 'react'
import { Col, Container, Row } from 'react-bootstrap';
// Array of Data
const StudentData = [
{
Name: "Waji",
Degree: "Bachlorrs"
},
{
Name: "Zain",
Degree: "Matric"
},
{
Name: "Rahat",
Degree: "B.Com"
},
{
Name: "Wajahat",
Degree: "Bachlorrs"
},
{
Name: "Sabi",
Degree: "Bachlorrs"
}
]
let NewCard = () => {
return (
<Row>
{StudentData.map((props) => {
return (
<Col sm={6} md={4} className='mt-3'>
<div className="card" style={{ width: '18rem' }}>
<div className="card-body">
<h5 className="h5">{props.Name}</h5>
<p className="card-text">{props.Degree}</p>
Click
</div>
</div>
</Col>
)
})}
</Row>
)
}
export default function MyCard() {
return (
<Container>
<NewCard
title=''
calss=''
/>
</Container>
)
}
ReactDOM.render(
<MyCard />,
document.getElementById('root')
)
Creates the following: