0
i would like to know how to make a simple purchase addition in the js React showing the amount of items added in a div and the calculated price whenever adding a new item, I already downloaded other projects to try to identify how it is done, but it was not specifically what I wanted(or I could not read the code clearly), which is to click on the div with the price, add to cart, show the quantity and total cost
below is the code I made in codepen, I already asked another question posting the codepen and edited removing it, so I do not know if you can post or not, thanks in advance
this.state = {
produtos: [
{ titulo: 'ham1', preco: '5,00'},
{ titulo: 'ham2', preco: '7,50'},
{ titulo: 'ham3', preco: '6,50'},
{ titulo: 'ham4', preco: '7,50'}
],
conta: 0,
carrinho: 0,
};
function Total(props) {
return(
<div className="person">
<p className="espaco">items {this.state.carrinho}</p>
<p className="espaco">$ {this.state.conta}</p>
</div>
)
}
function comprar() {
alert('ola')
}
function Conteudo(props) {
return(
<div className="person">
<div className="espaco" onClick={this.comprar}>
hamburguer: 5,00</div>
<div className="espaco" onClick={this.comprar}>
hamburguer: 7,50</div>
<div className="espaco" onClick={this.comprar}>
hamburguer: 6,50</div>
<div className="espaco" onClick={this.comprar}>
hamburguer: 7,50</div>
</div>
)
}
var app = (
<div>
<Total />
<Conteudo />
</div>
);
ReactDOM.render(app,
document.querySelector('#app'));
.person {
display: inline-block;
margin: 10px;
border: 1px solid #eee;
box-shadow: 0 2px 2px #ccc;
width: 200px;
padding: 20px;
}
.espaco {
padding: 10px;
border: 1px solid red;
}
.espaco:hover {
background: blue;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Check out this link: https://medium.com/@ayabellazreg/make-a-simple-shopping-Cart-app-using-React-Redux-1-3-fefde93e80c7
– Victor