No pude entender por qué obtengo la misma tarjeta dos veces por fila. Esto es lo que tengo, siguiendo la documentación de bootstrap:
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;Intenté agregar un contenedor, cambié el nombre de clase varias veces y jugué con .map(), pero sigo obteniendo la misma tarjeta dos veces por fila, en lugar de 2 tarjetas diferentes por fila. Básicamente, me gustaría tener 2 cartas por fila. No estoy seguro de lo que está pasando con la red. Agradezco la ayuda.
Ok, a ver si esto te ayuda. Con esta estructura tendrás 1 fila con 2 tarjetas para cada publicación.
// 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 ) }