make react bootstrap column md - reactjs

Question

I'm learning react and react-bootstrap. I want to make a simple application such as a card (using react-bootstrap) and display it with col md = 3 so that the card becomes 4 in 1 row. UI from youtube can be example, we can consider the example from the youtube UI as a card. Every 1 row I want 4 cards like the Youtube UI image that I gave. How can I do that?
Image of my app that i made so far.
App.js:
import React from "react";
import "./App.css";
import { Container, Row } from "react-bootstrap";
import Col3 from "./components/col3.component";
class App extends React.Component {
constructor() {
super();
this.state = {
payments: []
};
}
async componentDidMount() {
const responsePayments = await fetch(
"https://api.bukalapak.com/v2/products/f3vi.json"
);
const paymentJson = await responsePayments.json();
this.setState({ payments: paymentJson.product.installment });
}
render() {
return (
<Container>
<Row>
<Col3 payments={this.state.payments}/>
{console.log(this.state.payments)}
</Row>
</Container>
);
}
}
export default App;
col3.component.jsx:
import React from "react";
import {
Card,
Button
} from "react-bootstrap";
const Col3 = props => {
return (
<div>
{props.payments.map(payment => {
return (
<Card key={payment.bank_issuer} style={{ width: '18rem' }}>
<Card.Img variant="top" src={payment.url_logo} />
<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">{payment.bank_issuer}</Button>
</Card.Body>
</Card>
);
})}
</div>
);
};
export default Col3;
Notes: I am using this API in product.installment object (line 157) so that can get 17 banks sample.

Answer 1

Inside the Row you are directly putting your custom component,
<Row>
<Col3 payments={this.state.payments}/>
{console.log(this.state.payments)}
</Row>
And in child component giving style={{ width: '18rem' }} to the element will not set it be as Col.
You actually need to write the Col.
import { Card, Button, Col} from "react-bootstrap";//import Col here
const Col3 = props => {
return (
<> //Use Fragment instead of div
{props.payments.map(payment => {
return (
<Col md={3}> //Col start
<Card key={payment.bank_issuer} style={{ width: '18rem' }}> //You may not need this style now
<Card.Img variant="top" src={payment.url_logo} />
<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">{payment.bank_issuer}</Button>
</Card.Body>
</Card>
</Col> //Col end
);
})}
</>
);
};
For more about Grid check the docs