javascript - Calculating quantity and price total in react -

i'm extremely new user react , i'm having trouble app i'm trying design. want list of products can have user update quantity of, total each quantity appear under product , total whole package appear @ bottom. if can me appreciated. code included below `

import react, { component } "react"; import logo "./logo.svg"; import "./app.css";  class app extends component {     render() {     /* counter part of app used denote quantity of items*/      class counter extends react.component {       constructor(props) {         super(props);          this.state = {           count: 0         };       }        onupdate = (val) => {         this.setstate({           count: val         });       };        render() {          return (           <div>             <counterchild onupdate={this.onupdate} />             <br />             <otherchild passedval={this.state.count} />           </div>         )       }     }     /*counter section ends here*/      class counterchild extends component {       constructor(props) {         super(props);          this.state = {           count: 0 // setting original state         };       }        increase = e => {         this.props.onupdate(e.target.value  = (this.state.count + 1)) // passed other child , parent         this.setstate({count: this.state.count + 1}); // setting new state       };        decrease = e => {         this.props.onupdate(e.target.value  = (this.state.count - 1))         this.setstate({count: this.state.count - 1});       };        render() {         return (           <div>             {this.state.count}<br />             <button onclick={this.decrease.bind(this)}>-</button>             <button onclick={this.increase.bind(this)}>+</button>           </div>         );       }     }      /* following used load products list*/     var products = [["product one", 24.99], ["product two", 9.99]];     /* products list ends*/      class otherchild extends react.component {       render() {                   return (           <div>             {this.props.passedval}           </div>         );       }     }      /* section of app calculates price times quantity*/      /*price section ends here*/       /*this section used calculate total appears @ bottom of page*/     var mytotal = 0; // variable hold total      (var = 0, len = products.length; < len; i++) {       mytotal += products[i][1]; // iterate on first array , grab second element add values     }     /*total calculation section ends*/       var productprice = 0; // variable hold total      (var q = 0, pricelen = products.length; q < pricelen; q++) {       productprice = products[q][1]; // iterate on first array , grab second element add values     }         /*the following section displays product info in app 1 line @ time*/     class test extends component {       render() {         var productcomponents = this.props.products.map(function(product) {            return (             <div classname="product">               {product[0]}<br />               £{productprice}<br />               <counter />             </div>           );         });         return <div>         {productcomponents}         </div>;       }      }     /*product info display ends*/      /*the following section returnd final output appears on screen*/     return (       <div classname="app">         <div classname="app-header">           <img src={logo} classname="app-logo" alt="logo" />           <h2>welcome react</h2>         </div>         <div>           <test products={products} />           £{mytotal}         </div>        </div>     );   } }  export default app; 

` apologise if code messy, said i'm new @ this. assistance appreciated

checkout snippet below, think should help.

class app extends react.component {    state = {      products: [        {title: 'apple', count: 0, price: 100},        {title: 'ibm', count: 0, price: 200},        {title: 'hp', count: 0, price: 300},      ]    }        onchange = (index, val) => {      this.setstate({        products: this.state.products.map((product, i) => (          === index ? {...product, count: val} : product        ))      })    }      render () {      return (        <div>          <productlist products={this.state.products} onchange={this.onchange} />          <total products={this.state.products} />        </div>      )    }  };    const productlist = ({ products, onchange }) => (    <ul>      {products.map((product, i) => (        <li key={i}>          {product.title}          <input             type="text"             value={product.count}            onchange={e => onchange(i, parseint(e.target.value) || 0)}          />        </li>      ))}    </ul>  );    const total = ({ products }) => (    <h3>      price:       {products.reduce((sum, i) => (        sum += i.count * i.price      ), 0)}    </h3>  )      reactdom.render(<app />, document.queryselector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="root"></div>