0

Buenas tengo un buscador en react donde a partir de un "termino" hago una llamada api que me devuelve N objetos y los "pinto" por pantalla (esto me funciona) y lo hago con 2 componentes

    render() {

    let productsCards = Object.values(this.state.productos).map((d, idx) => {
            return <ProductCard producto={d}/>
        }
    );

    return (
        <div className="app container" style={{backgroundColor: "whitesmoke", padding: "20px"}}>
            <div className="jumbotron">
                <p className="lead text-center">Buscador de productos</p>

                <Search
                    datosBusqueda = {this.datosBusqueda}
                />

            </div>
            <>
            {productsCards}

            </>
            {this.state.termino}

        </div>


    );
}

En la primera variable que muestro productsCards allí tengo un array de productos y los envío al componente "ProductCard", lo que no se como decirle es que muestre "3 productos por fila" actualmente los muestra una debajo de otro.

El componente ProductCard es este

import React, {Component} from "react";

class ProductCard extends Component{

    render() {
        return (
            <div className="row">
                Nombre: {this.props.producto.name}<br/>
                Precio: {this.props.producto.price}<br/>
                Link : <a href="#">Ver producto</a>
            </div>
        );
    }
}

export default ProductCard;

1 respuesta 1

1

Según la documentación de Bootstrap, el sistema de columnas se corresponde de la siguiente forma:

<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Donde la propiedad row indica una fila y, dentro, se generan N columnas (en este caso, 3) de tamaño 12/N.

Según la estructura de datos, Bootstrap dice que su tamaño máximo de las columnas es 12, por lo que, tu solución es muy sencilla, debes adaptar tu componente según el código de arriba. Donde el div con className = col-sm debe ser tu Product. Debe quedar algo así,

import React, {Component} from "react";

class ProductCard extends Component{

    render() {
        return (
            <div className="col-4">
                Nombre: {this.props.producto.name}<br/>
                Precio: {this.props.producto.price}<br/>
                Link : <a href="#">Ver producto</a>
            </div>
        );
    }
}

export default ProductCard;

Y luego, en el render del componente, debes crear un método para iterar sobre la posición i, i+1 e i+2:

let arrayIt = []
var it = () => {
for(let i = 0; i < productsCards.length; i+=2) {
    arrayIt.push(
        <div className="row">
<!-- Aquí añadimos a la lista, las columnas a tratar-->
            {productCards[i]}
            {productCards[i+1]}
            {productCards[i+2]}
        </div>
    );
}
};

Y, por último, en el render del componente mostramos el array que hemos construido arriba.

    render() {

    let productsCards = Object.values(this.state.productos).map((d, idx) => {
            return <ProductCard producto={d}/>
        }
    );

    return (
        <div className="app container" style={{backgroundColor: "whitesmoke", padding: "20px"}}>
            <div className="jumbotron">
                <p className="lead text-center">Buscador de productos</p>

                <Search
                    datosBusqueda = {this.datosBusqueda}
                />

            </div>
            <div className="container">
            {arrayIt}

            </div>
            {this.state.termino}

        </div>


    );
}
4
  • Gracias Sergio, el 1º y 3º paso me quedan claros. pero el segundo paso no me queda claro , eso debe ir en el "render" de ProductCards o del APP.js? Gracias
    – ilernet
    Commented el 21 oct. 2021 a las 10:06
  • Lo segundo debe ir en el mismo sitio donde haces el return de todo, en el mismo sitio que el tercer paso. Un saludo. Commented el 21 oct. 2021 a las 10:31
  • Vale ya ví el fallo, si quieres editar hay un error donde dices "var it =" ese trozo sobra. Por el resto ya entendí el funcionamiento. 1000 gracias
    – ilernet
    Commented el 21 oct. 2021 a las 10:42
  • No es que faltase, es que se me pasó poner que var it = () => {}; Si te ha servido, márcala como corrección. De nada :D Commented el 21 oct. 2021 a las 10:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.