title: How do i increment and view cart items in react?
body: <p>Hello please I am new to react and trying to build a checkout system via fake store API where users can view items in cart , increase item's count , reduce item's count and clear cart. So far I have rendered the products on main page. But I don't know how to increment item cart and view items in cart. I know this might be an easy task but I don't know how to proceed and I am trying to avoid video tutorials. please any advice on how to proceed is appreciated.</p>
  <pre><code>
  import React from 'react'
  import './App.css';
  import axios from 'axios'
  
  
  class App extends React.Component {
    constructor(props) {
        super(props)
        
        this.state = {
            products: [],
            count: 0 
        }
    }
    componentDidMount(){
   axios.get('https://fakestoreapi.com/products')
   .then(response =&gt;{
       const products = response.data
       this.setState({products})
       console.log(products)
   } )
   
   .catch(err=&gt; console.log(err))
    }
  
    incrementCart = () =&gt;{
   this.setState({count: this.state.count + 1})
    }   
    
    
    render() {
        return (
            &lt;div id=&quot;container&quot;&gt;
           {
          this.state.products.map(product=&gt; 
               &lt;div id=&quot;product&quot; key={product.id}&gt;
                &lt;img className=&quot;img&quot; src={product.image} alt=&quot;product-store&quot;/&gt;
                &lt;h1&gt;{product.category}&lt;/h1&gt;
                 &lt;h4&gt;{product.price}&lt;/h4&gt;
                 &lt;button onClick={this.incrementCart}&gt;Add To Cart&lt;/button&gt;
               &lt;/div&gt;
              
           )    
           }
           
            &lt;/div&gt;
  
        )
    }
  }
  export default App
  
  </code></pre>