how to make a simple shopping cart with React js

Asked

Viewed 2,099 times

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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.