• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

169
Views
¿Por qué obtengo tarjetas duplicadas por fila usando bootstrap - react?

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.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 ) }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error