es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo utilizar la cuadrícula de Bootstrap con componentes en React?

02 Aug, 2023 Programación

Quiero obtener al menos 2 tarjetas en la misma fila, pero como los datos se están mapeando uno por uno, no tengo idea de cómo hacerlo. Estoy usando un componente personalizado llamado ‘Content’ y devolviendo los datos aquí.

import React from "react";
import { Card, CardGroup, Col, Row } from "react-bootstrap";
import { ListGroup, ListGroupItem } from "react-bootstrap";
const Content=({name, image, type, vegan, cuisines})=>{

return(
    <div>
    <cardgroup>
    <col xs="{12}" sm="{6}" md="{4}" lg="{4}">
        <card>
            <card.img variant="top" src="{image}"></card.img>
            <card.body>
                <card.title>{name}</card.title>
                <card.text>
                    <listgroup>
                        <listgroupitem>Type: {type}</listgroupitem>
                        <listgroupitem>Vegan: {vegan}</listgroupitem>
                        <listgroupitem>Cuisines: {cuisines.cuisines.join(", ")}</listgroupitem>
                    </listgroup>
                </card.text>
            </card.body>
        </card>

    </cardgroup>
      </div>
)
}
export default Content
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar varias tarjetas en la misma fila, puedes modificar el código renderizando múltiples instancias del componente Content con la ayuda de los componentes Row y Col de react-bootstrap. Aquí tienes un ejemplo:

    import React from "react";
import { Col, Row } from "react-bootstrap";
import Content from "./Content";
const data = [
  {
    name: "Tarjeta 1",
    image: "https://picsum.photos/200",
    type: "Tipo 1",
    vegan: true,
    cuisines: { cuisines: ["Cocina 1", "Cocina 2"] }
  },
  {
    name: "Tarjeta 2",
    image: "https://picsum.photos/201",
    type: "Tipo 2",
    vegan: false,
    cuisines: { cuisines: ["Cocina 3", "Cocina 4", "Cocina 5"] }
  },
  // Agrega más tarjetas aquí
];
const Cards = () => {
  return (
    <div>
      <row>
        {data.map((item, index) => (
          <col xs="{12}" sm="{6}" md="{4}" lg="{4}" key="{index}">
            <content {...item}=""></content>

        ))}
      </row>
    </div>
  );
};
export default Cards;

    En este ejemplo, utilizamos un array llamado data para almacenar la información de cada tarjeta. Luego, hacemos un mapeo sobre el array data, renderizando un componente Content para cada elemento. Envolvemos el componente Col con el componente Row para mostrar varias tarjetas en la misma fila. La propiedad key se establece como el índice de cada elemento para optimización de rendimiento.

Comments are closed.