• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

168
Vistas
¿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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda