Отображение всего негатива и количества

Question

привет всем, что вы можете называть меня Нефф, я новичок на сайте, и, конечно, новичок в React, я объясняю вам свою проблему

Я хочу создать сайт электронной коммерции, для моегоПервый тест Я создал мои продукты (см. рисунок)

Сегодня я использую мой sql для отображения продуктов

, поэтому моя проблема

Я не могукарта, на фотографиях будет легче понять

с одной стороны я могу отобразить мой комикс без количества, а с другой - количество без комикса, вы видите мою проблему

извинитеза мой английский, и заранее спасибо за вашу помощь всем Neff

const initState = {
category: [{id: 1, name:'bieres'}],
items: [


    {id:1,title: "Hype PA (Demi-Pinte)", desc:"Pression - Biére Blonde", qty:"25 cl", img: hypePa, price: 3.50, ctg: 1, },
    {id:2,title:'Hype PA (Pinte)', desc: "Pression - Biére Blonde ",qty:"50 cl", price:6 ,img: hypePa, bieres: "bieres",},
    {id:3,title:'Houblons des blés (Demi-Pinte)', desc: "Pression - Biére Blonde",qty:"25 cl", price: 3.50, img: houblonCommeLesBles, ctg: "bieres",},
    {id:4,title:'Houblons des blés (Pinte)', desc: "Pression - Blonde ",qty:"50 cl",  price:6 ,img: houblonCommeLesBles, ctg: "bieres",},
    {id:5,title:'Session IPA (3,6°)', desc: "Biére Blonde ",qty:"Bouteille",  price:5,img:sessionIpa, ctg: "bieres", },
    {id:6,title:'Sour Kefir (5,9°)', desc: "Biére Blonde", qty:"Bouteille", price:6,img: sourkefir, ctg: "bieres",},
    {id:7,title:'Brown Ale (5,4°)', desc: "Biére blonde", qty:"Bouteille", price:5.5,img: brownAle, ctg: "bieres",},

],

addedItems:[],
total: 0,

 }
  const cartReducer= (state = initState,action)=>{



//INSIDE HOME COMPONENT
if(action.type === ADD_TO_CART){
      let addedItem = state.items.find(item=> item.id === action.id)
      //check if the action id exists in the addedItems
     let existed_item= state.addedItems.find(item=> action.id === item.id)
     if(existed_item)
     {
        addedItem.quantity += 1 
         return{
            ...state,
             total: state.total + addedItem.price 
              }
    }
     else{
        addedItem.quantity = 1;
        //calculating the total
        let newTotal = state.total + addedItem.price 

        return{
            ...state,
            addedItems: [...state.addedItems, addedItem],
            total : newTotal
        }

    };
}
if(action.type === REMOVE_ITEM){
    let itemToRemove= state.addedItems.find(item=> action.id === item.id)
    let new_items = state.addedItems.filter(item=> action.id !== item.id)

    //calculating the total
    let newTotal = state.total - (itemToRemove.price * itemToRemove.quantity )
    console.log(itemToRemove)
    return{
        ...state,
        addedItems: new_items,
        total: newTotal
    }
}



//INSIDE CART COMPONENT
if(action.type=== ADD_QUANTITY){
    let addedItem = state.items.find(item=> item.id === action.id)
      addedItem.quantity += 1 
      let newTotal = state.total + addedItem.price
      return{
          ...state,
          total: newTotal
      }
}
if(action.type=== SUB_QUANTITY){  
    let addedItem = state.items.find(item=> item.id === action.id) 
    //if the qt == 0 then it should be removed
    if(addedItem.quantity === 1){
        let new_items = state.addedItems.filter(item=>item.id !== action.id)
        let newTotal = state.total - addedItem.price
        return{
            ...state,
            addedItems: new_items,
            total: newTotal
        }
    }
    else {
        addedItem.quantity -= 1
        let newTotal = state.total - addedItem.price
        return{
            ...state,
            total: newTotal
        }
    }

}

if(action.type=== ADD_SHIPPING){
      return{
          ...state,
          total: state.total + 6
      }
}

if(action.type=== 'SUB_SHIPPING'){
    return{
        ...state,
        total: state.total - 6
     }
      }

  else{
  return state
    }

 }

export default cartReducer;

1

getRandom = async () => {

    const res = await axios.get(
        'http://localhost:5252/api/allproducts'
    )
    this.setState({ data: res.data })
}
componentDidMount() {
    this.getRandom()
}



render() {
    console.log(this.state.data)
    console.log(this.state.data)
    const externalCloseBtn = <button className="crossModal" style= 
  {{ position: 'absolute', top: '15px', right: '15px' }} onClick= 
{this.toggle}>&times;</button>;

    let datas = this.state.data.map(datass => {
        return (
            <div className="homeProduct">
                <button className="buttonContainerHome" onClick={() 
      => this.toggle(datass.id)}>{this.props.buttonLabel}

                    <Media  >
                        <Media body 
 className="mediaBodyContainerHome">
                            <div className="mediaBodyTitle">
                                <Media heading 
     className='MediaTextHome'>
                                    {datass.title}
                                </Media>

                                <Media className='MediaTextHome2'>
                                    {datass.price} €
                            </Media>
                            </div>
 </button>

2

  let addedItems = this.props.items.length ?
        (
            this.props.items.map(item => {
                return (
     <Media className='MediaTextHome2'>
                                {item.quantity} €
                            </Media>