title: Problem with the id of the items in shopping cart application in react
body: <p>I am developing a shopping cart application . I am using redux and routing . There are mainly 3 pages Home,shop and About. I am adding authentication to the shop page and after successful authentication the user can enter into the shop page. In the shop page there are items which we can add to cart . totally i have 3 items in my shop page.whats my problem is when i am clicking add to cart for 1 st item it is displaying 3 items. I know the problem is with the id's of the items. But I am struggling from past one hour to resolve it.</p>
  
  <p>Thanks in advance.</p>
  
  <p>//App.js</p>
  
  <pre><code>import React ,{Component} from 'react';
  import './App.css';
  import Navigation from './Step1/Navbar' 
  import Home from './Step1/Home'
  import Shop from './Step1/Shop'
  import About from './Step1/About'
  import Login from './LoginAuthentication/Loginform'
  import {BrowserRouter as Router,Route} from 'react-router-dom'
  import {connect} from 'react-redux'
  
  const mapStateToProps=(state)=&gt;{
  
    return{
       isLogin:state.isLogin
    }
  }
  
  class  App extends Component {
    render(){
    return (
      &lt;Router&gt;
      &lt;div className="App"&gt;
        &lt;Navigation/&gt;
        &lt;Route path="/" exact component={Home}/&gt;
        &lt;Route path="/about" component={About}/&gt;
        &lt;Route path="/shop"
         render={() =&gt;(
             this.props.isLogin ? &lt;Shop/&gt; : &lt;Login/&gt;
          ) }
  
        /&gt;
      &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  }
  export default connect(mapStateToProps,null)(App);
  </code></pre>
  
  <p>//shop template.js</p>
  
  <pre><code>import React from 'react'
  //import logo from '../cricket bat.jpg'
  import Displaylist from '../Components/DisplayList'
  const Shop_template=(props)=&gt; {
      return (
          &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                    &lt;div className="col-sm-6"&gt;
                         &lt;div className="card-body"&gt;
                          &lt;h4 className="card-title"&gt;{props.cardtitle}&lt;/h4&gt;
                          &lt;p className="card-text"&gt;{props.description}&lt;/p&gt;
                          &lt;h3&gt;Price :{props.currency}{props.price}&lt;/h3&gt;
                         &lt;button type="button" onClick={props.cartHandler} className="btn btn-primary"&gt;Add to cart&lt;/button&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
  
                       &lt;div className="col-sm-6"&gt;
                          &lt;Displaylist/&gt;
                      &lt;/div&gt;
                       &lt;/div&gt;
  
                    &lt;/div&gt;
  
      )
  }
  
  export default Shop_template
  </code></pre>
  
  <p>//shop.js --> i am updating the state in shop.js to redux state</p>
  
  <pre><code>import React, { Component } from 'react'
  import ShopTemplate from './Shop_template'
  import {connect} from 'react-redux'
  import {action2} from '../Actions/action1'
  const mapDispatchToProps=(dispatch)=&gt;({
  
      CartHandler:(details)=&gt;dispatch(action2(details))
  
  })
   class Shop extends Component {
      state={
          items:[
              {id:1,cardtitle:'SSS Bat',description:'A stroke to score',currency:'$',price:100},
              {id:2,cardtitle:'One upon a wall street',description:'A way to investment',currency:'$',price:50},
              {id:3,cardtitle:'mi powerbank 10000mah',description:'Keep charged always',currency:'$',price:200}
          ]
      }
  
      cartHandler=()=&gt;{
         this.props.CartHandler(this.state.items)
      }
      render() {
  
           const info=this.state.items.map((detail)=&gt;{
               return &lt;ShopTemplate 
                cardtitle={detail.cardtitle}
                description={detail.description}
                currency={detail.currency}
                price={detail.price}
                key={detail.id}
                cartHandler={this.cartHandler}
               /&gt;
           })
  
          return (
              &lt;div&gt;
               {info}
              &lt;/div&gt;
  
          )
      }
  }
  
  export default connect(null,mapDispatchToProps)(Shop)
  
  /
  </code></pre>
  
  <p>/reducer.js</p>
  
  <pre><code>import {LOGINCHECK} from '../Constants/actiontypes'
  import {ADDTOCART} from '../Constants/actiontypes'
  const initialState={
     isLogin:false,
     items:[]
  }
  const reducer1=(state=initialState,action)=&gt;{
  
     //console.log(state)
     if(action.type===LOGINCHECK){
        return Object.assign({},state,{isLogin:true})
     }
     if(action.type===ADDTOCART){
        return Object.assign({},state,{items:state.items.concat(action.payload)})
     }
  
     return state
  }
  
  export default reducer1
  </code></pre>
  
  <p>//DisplayList.js</p>
  
  <pre><code>import React from 'react'
  import Display from './Display'
  import {connect} from 'react-redux'
  
  const mapStateToProps=(state)=&gt;{
  
      return{
      items:state.items
  }
  }
  
  const DisplayList=({items})=&gt;{
     console.log(items.body)
      return(
          &lt;div&gt;
  
       {items.map(it=&gt;{
  
         return(
             &lt;Display iteminfo={it.body} key={it.body.id}/&gt;
         )
  
       })
   }
  
  
          &lt;/div&gt;
      )
  
  }
  
  
  export default connect(mapStateToProps,null)(DisplayList)
  </code></pre>
  
  <p>//Display.js</p>
  
  <pre><code>import React from 'react'
  
  const Display=({iteminfo:{id,cardtitle, description,currency,price}}) =&gt;{
  
      return (
          &lt;div&gt;
  
          &lt;h4&gt;{cardtitle}&lt;/h4&gt;
          &lt;p&gt;{description}&lt;/p&gt;
          &lt;h3&gt;{currency}{price}&lt;/h3&gt;  
          &lt;button type="button" className="btn btn-danger"&gt;Remove From cart&lt;/button&gt; 
          &lt;/div&gt;
      )
  }
  
  export default Display
  </code></pre>