Perdón por la molestia, estoy dando mis primero pasos con React.js, y uno de los ejercicios era hacer una página de compras, en donde cada compra se agregara al carrito y diera un total de cosas comprada con el total en dinero. Como se puede ver en la imagen en donde tiene que ir el valor total me sale NaN. En donde puede estar el error???. Adjunto código. Como pueden observar en la imagen donde tendría que estar el total aparece NaN, en donde puede estar el error???. adjunto código. Y también quería pedirles, si alguien me puede orientar con el stock???. Espero no estar pidiendo demasiado, muchas gracias desde ya.
Como pueden observar en la imagen donde tendría que estar el total aparece NaN, en donde puede estar el error???. adjunto código. Y también quería pedirles, si alguien me puede orientar con el stock???. Espero no estar pidiendo demasiado, muchas gracias desde ya.
import React from 'react';
import {a, b, Popover, PopoverHeader, PopoverBody, Table, Badge, Button} from 'reactstrap';
import {listaCarrito} from '../listaCarrito.json';
class Carro extends React.Component{
constructor(){
super();
this.state={
popoverOpen:false,
listaCarrito
};
this.toggle=this.toggle.bind(this);
};
toggle(){
this.setState(prevState => ({
popoverOpen: !prevState.popoverOpen
}));
};
calculoTotal(){
let arregloPrecios=[];
let precioTotal=0;
listaCarrito.map(
(listaCarrito,i) => {
arregloPrecios.push(parseInt(listaCarrito.precio));
precioTotal=arregloPrecios.reduce((a,b)=>(a+b),0)*1000;
return(precioTotal);
}
);
return(precioTotal)
};
render(){
const arregloCarrito=this.state.listaCarrito.map(
(listaCarrito, i) =>{
return(
<tr key={i}>
<td>{(i += 1)}</td>
<td>{listaCarrito.titulo}</td>
<td>{listaCarrito.precio}</td>
</tr>
)
}
)
return(
<div>
<Button id="Popover1" color="info">
<span className="material-icons">shopping_cart</span>
<Badge color="secondary">{arregloCarrito.length}</Badge>
</Button>
<Popover target="Popover1" placement="bottom" isOpen={this.state.popoverOpen} toggle={this.toggle}>
<PopoverHeader>Listado de Compras</PopoverHeader>
<PopoverBody>
<Table>
<thead>
<tr>
<th>#</th>
<th>Producto</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
{arregloCarrito}
</tbody>
<tfoot>
<th><b><u>Total:</u></b></th>
<td>{this.calculoTotal()} U$S </td>
</tfoot>
</Table>
</PopoverBody>
</Popover>
</div>
);
};
};
export default Carro;
introducir el código aquí
calculoTotal
el arreglolistaCarrito
o usarlo de esta manera:this.state.listaCarrito
ya que tu listado esta en el state.