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;