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.
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
)
}