Problem with the id of the items in shopping cart application in react

Question

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.

Thanks in advance.

//App.js

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)=>{

  return{
     isLogin:state.isLogin
  }
}

class  App extends Component {
  render(){
  return (
    <Router>
    <div className="App">
      <Navigation/>
      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/shop"
       render={() =>(
           this.props.isLogin ? <Shop/> : <Login/>
        ) }

      />
    </div>
    </Router>
  );
}
}
export default connect(mapStateToProps,null)(App);

//shop template.js

import React from 'react'
//import logo from '../cricket bat.jpg'
import Displaylist from '../Components/DisplayList'
const Shop_template=(props)=> {
    return (
        <div className="container">
                <div className="row">
                  <div className="col-sm-6">
                       <div className="card-body">
                        <h4 className="card-title">{props.cardtitle}</h4>
                        <p className="card-text">{props.description}</p>
                        <h3>Price :{props.currency}{props.price}</h3>
                       <button type="button" onClick={props.cartHandler} className="btn btn-primary">Add to cart</button>
                     </div>
                     </div>

                     <div className="col-sm-6">
                        <Displaylist/>
                    </div>
                     </div>

                  </div>

    )
}

export default Shop_template

//shop.js --> i am updating the state in shop.js to redux state

import React, { Component } from 'react'
import ShopTemplate from './Shop_template'
import {connect} from 'react-redux'
import {action2} from '../Actions/action1'
const mapDispatchToProps=(dispatch)=>({

    CartHandler:(details)=>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=()=>{
       this.props.CartHandler(this.state.items)
    }
    render() {

         const info=this.state.items.map((detail)=>{
             return <ShopTemplate 
              cardtitle={detail.cardtitle}
              description={detail.description}
              currency={detail.currency}
              price={detail.price}
              key={detail.id}
              cartHandler={this.cartHandler}
             />
         })

        return (
            <div>
             {info}
            </div>

        )
    }
}

export default connect(null,mapDispatchToProps)(Shop)

/

/reducer.js

import {LOGINCHECK} from '../Constants/actiontypes'
import {ADDTOCART} from '../Constants/actiontypes'
const initialState={
   isLogin:false,
   items:[]
}
const reducer1=(state=initialState,action)=>{

   //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

//DisplayList.js

import React from 'react'
import Display from './Display'
import {connect} from 'react-redux'

const mapStateToProps=(state)=>{

    return{
    items:state.items
}
}

const DisplayList=({items})=>{
   console.log(items.body)
    return(
        <div>

     {items.map(it=>{

       return(
           <Display iteminfo={it.body} key={it.body.id}/>
       )

     })
 }


        </div>
    )

}


export default connect(mapStateToProps,null)(DisplayList)

//Display.js

import React from 'react'

const Display=({iteminfo:{id,cardtitle, description,currency,price}}) =>{

    return (
        <div>

        <h4>{cardtitle}</h4>
        <p>{description}</p>
        <h3>{currency}{price}</h3>  
        <button type="button" className="btn btn-danger">Remove From cart</button> 
        </div>
    )
}

export default Display

Answer 1

I can see too many problems in your source code, first of all, namings can be better now it's confusing.

your shop items are in Shop component state but it has to be inside your redux module

initialState = {
    items: ["your items should be here"]
}

of course, its because you are hardcoding your shop items. you may want to Get shop items from an API.

when you click on add to cart button you have to pass itemId to action. (right now you don't know which item is going to add to cart ).

and then inside reducer action.payload.itemId will be itemId that is added to cart then you can do something like this

 const foundItem = state.items.find(it => it.id === action.payload.itemId);

now you found item in your products(items) array,

you can add this item to another array called basket or cart that represents items user added.

for the next step you want to add an inventory and quantity property to see how many items the user wants and how many do you have in your inventory

if you want a more detailed description don't hesitate to ask