CODEWITHSUNDEEP
reactjsreact-bootstrap
Mohamad Handy Nugraha
Mohamad Handy Nugraha

Reputation: 302

make react bootstrap column md

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.

Upvotes: 0

Views: 1483

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

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

Upvotes: 1

Related Questions