How to fold the prices in the basket of goods?

You want the basket of goods is composed of the prices of products that the user wants to purchase.

Component-parent:
import React {Component} from 'react';

import Item from '../components/Item';
import Cart from '../components/Cart';

import '../css/shop.css';
import '../css/keyload.css';

class Items extends Component{
constructor(props){
super();
 this.state ={
 price: "
};
 this.handleCartPriceChange = this.handleCartPriceChange.bind(this);
}
handleCartPriceChange(price){
this.setState({price});
}
render(){
return(
 <div classname="wrap">
 <cart price="{this.state.price}">
 <section classname="shop">
 <div classname="wrap_container">
 {this.props.items.map(item =>
 <item price="{item.price}" oncartpricechange="{this.handleCartPriceChange}" key="{item.id}" shirt="{item.img}/">
)
}
</item></div>
</section>
</cart></div>
);
}
}
export default Items;


Cart.jsx
import React {Component} from 'react';

import Button from './Button';

import cart from './img/cart.svg';
export default class Cart extends Component{
constructor(props){
super();
}
render(){
return(
 <aside classname="cart">
 <div classname="wrapper">
 <img src="{cart}" alt>
 <div classname="priceOutput">
 <span classname="price">{`${this.props.price ? this.props.price+ '$' : 'Add item to cart' }` }</span>
<hr>
 <button classname="btn_submit">Submit</button>
</div>
</div>
 </aside> 
);
}
}


Item.jsx: ( the item shop)
import React from 'react';

import Button from './Button';

function Item(props){
return(
 <div classname="shop__item">
 <img classname="item" src="{props.shirt}" alt>
 <div classname="title">
 <a href="#" classname="descr">read more</a>
 <button onclick="{()="> props.onCartPriceChange(props.price)} className="btn_buy">Buy</button>
</div>
 </div> 
);
}
export default Item;
June 10th 19 at 14:47
2 answers
June 10th 19 at 14:49
Solution
Well, I guess, is
this.setState({price});
should be something like
this.setState({ price: this.state.price + price });

The default value of the price - why the empty string? This amount does not happen. Is 0.
June 10th 19 at 14:51
And of course humanly developed religion does not allow you, and so you decided zafigachit project on React/Redux/chettam, and now is
SELECT SUM(`price`) FROM `basket` WHERE `userid`=:userid;
you have to inquire on the forum, as of this sheets, JavaScript, htmlя and components to pull the goddamn amount.
This is a project to hone their skills :) - vito_Gerhold24 commented on June 10th 19 at 14:54
Ahah, I laugh! - maxie.Mo commented on June 10th 19 at 14:57
and what is wrong? - vito_Gerhold24 commented on June 10th 19 at 15:00
I don't get is intended, and Michael ; ) Just Michael fun had formulated a proposal. If I somehow offended, then I apologize. - maxie.Mo commented on June 10th 19 at 15:03

Find more questions by tags JavaScriptReactFrontend