He recibido un desarrollo en React para implementar una funcionalidad pero hay algo que me tiene detenido. En un componente de la aplicación se agrega un producto a un pedido, con unos datos de ese producto tales como img, cantidad, color y otros. Lo estoy llevando todo a un estado de ese componente, pero necesito que esa información se muestre en otro componente, que es de un nivel superior. No logro hacerlo. Dejo el código de la captura de los datos.
addToCart(imagen, nombre, ref, marca, color, talla, cantidad){
this.setState({
selectedProduct: {
imagen: imagen,
nombre: nombre, //Descripcion
ref: ref, //Referencia
marca:marca, //nom_marca
color: color, // num_color, label_color
talla: talla, // label_talla
cantidad: cantidad //quantity
}
}, function(){
this.handleAddToCart(this.state.selectedProduct);
})
this.setState({
estado: "✔ ADDED"
}, function(){
setTimeout(() => {
this.setState({
estado: "ADD TO CART",
selectedProduct: {}
});
}, 5000);
});
}
handleAddToCart(selectedProducts){
let cartItem = this.state.cart;
let productID = selectedProducts.ref;
let productQty = selectedProducts.cantidad;
if(this.checkProduct(productID)){
console.log('hi');
let index = cartItem.findIndex((x => x.id == productID));
cartItem[index].cantidad = Number(cartItem[index].cantidad) + Number(productQty);
this.setState({
cart: cartItem
})
} else {
console.log('this');
cartItem.push(selectedProducts);
}
this.setState({
cart : cartItem,
cartBounce: true,
});
setTimeout(function(){
this.setState({
cartBounce:false,
cantidad: 1
});
console.log(this.state.cantidad);
console.log(this.state.cart);
}.bind(this),1000);
this.sumTotalItems(this.state.cart);
}
Estas son las dos funciones. Y esta es la manera como quiero usarlo en el otro componente:
export default class NavbarAdaptat extends Component {
constructor(props) {
super(props);
this.state = {
showCart: false,
cart: this.props.cartItems,
};
....
handleCart(e){
e.preventDefault();
this.setState({
showCart: !this.state.showCart
})
}
render() {
let cartItems;
cartItems = this.state.cart.map(product =>{
return(
<li className="cart-item" key={product.name}>
<img className="product-image" src={product.image} />
<div className="product-info">
<p className="product-name">{product.name}</p>
<p className="product-price">{product.price}</p>
</div>
<div className="product-total">
<p className="quantity">{product.quantity} {product.quantity > 1 ?"Nos." : "No." } </p>
<p className="amount">{product.quantity * product.price}</p>
</div>
<a className="product-remove" href="#" onClick={this.props.removeProduct.bind(this, product.id)}>×</a>
</li>
)
});
let view;
if(cartItems.length <= 0){
view = <EmptyCart />
} else{
view = <CSSTransitionGroup transitionName="fadeIn" transitionEnterTimeout={500} transitionLeaveTimeout={300} component="ul" className="cart-items">{cartItems}</CSSTransitionGroup>
}
y finalmente muestro el {view} Pero el cart: this.props.cartItems es mi problema, porque creo que cart Items no se está llenando en ninguna parte y no sé cómo hacerlo. Agradezco mucho su ayuda