Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

71
Vistas
Why am I getting duplicate cards per row using bootstrap - react?

I could not figure out why I am getting the same card twice per row. This is what I have, following bootstrap's documentation:

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Card, Row, Col, Container} from 'react-bootstrap';


function Post({post}) {

console.log("procedure:", post.procedure)
  return (
   
      <div>
        <Row xs={1} md={2} className="row-cols-2" >
     
          {Array.from({ length: 2 }).map((_, idx) => (
            <Col style={{ padding: '3rem' }}>
              <Card border="success" style={{ textAlign: 'center', width: '40rem', padding: '1rem' }} >
                {/* <Card.Img variant="top" src="holder.js/100px160" /> */}
                <Card.Body>
                  <Card.Title>Procedure: {post.procedure}</Card.Title>
                  <Card.Subtitle className="mb-2 text-primary"><b> Facility: </b> {post.facility.name} - Location:  {post.facility.city}, {post.facility.state}
                  </Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b> Patient cost: $</b>{post.patient_cost}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b> Insurance cost: $</b>{post.insurance_cost}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b>Date of procedure: </b>{post.date_of_procedure}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b>Date of invoice: </b>{post.date_of_invoice}</Card.Subtitle>
                  <Card.Text>
                  {post.comments}
                  </Card.Text>
                  <Card.Link as={Link} to={"/average"}><b>Check Average Cost </b></Card.Link>
                  <Card.Link href="#"><b>Another Link </b></Card.Link>
                </Card.Body>
                <Card.Footer>
                  <small className="text-primary"><b>Posted on: </b>{post.created_at}</small>
                </Card.Footer>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
  );
}

export default Post;

I tried adding container, changed the className a few times, and played around with the .map(), but I still get the same card twice per row, instead of 2 different cards per row. Basically, I would like to have 2 cards per row. Not sure what is going on with the grid. Appreciate the help.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Ok, let see if this help you. With this structure you will have 1 row with 2 cards for each post.

// Parent react component
div.container
// then iterate your posts right?
{
    posts.map((p, i) => {
        return(
            // Here u have 1 post right? use your Post Component
            <Post user={user} setUser={setUser} post={post} key={post.id}/>
        )
    })
}

function Post({post, user, key, setUser}) {
// Here post is a SINGLE ELEMENT right?
    return(
        div.row
        div.col-md-6 // first card - post['some property'] // Maybe here will be the user info
        div.col-md-6 // second card - post['some other property'] // maybe here will be the post info
    )

}
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos