How to change cart icon state using React Hooks-CodePudding

I have two components, one will contain a button that will trigger the cart icon change when clicked, while the second component will contain the cart icon to be changed. I have tried but i have not been able to achieve this.Here is an image to explain better

Component A

import React,{useState} from 'react'

const Cart = () => {
const [itemCount, setItemCount] = useState('');
return (
<div>
  <button
        style={{width: '10%', height: '10%', padding:'20px'}}
        onClick={() => {
          setItemCount(itemCount   1);
        }}
      >
        {" "}
    </button>
</div>
)
}

export default Cart

Component B

import React from 'react'
import Cart from './Cart'

const CartShow = (props) => {
return (
<div style={{border: '2px solid red', background: 'black', width: '30%', margin: '100px', 
padding: '30px'}}>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
xmlns="http://www.w3.org/2000/svg">
    <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 
8 21C8 21.5523 8.44772 22 9 22Z" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
    <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 
20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="white" stroke-width="2" stroke- 
linecap="round" stroke-linejoin="round"/>
    <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 
9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 
21.3086 14.8504 21.4 14.39L23 6H6" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
  {props.itemCount}</svg>
    <Cart/>
</div>
)
}

export default CartShow

CodePudding user response：

Since Cart is a child of CartShow you should move the state to CartShow ( or have a different parent component that contains both of them ). Then pass a func down to Cart to update itemCount

CodePudding user response：

Assuming your code works except the state change. following should work(not tested):

Component A

const Cart = (props) => 
<div>
  <button
        style={{width: '10%', height: '10%', padding:'20px'}}
        onClick={() => props.setItemCount(props.itemCount   1)}
      >
        {" "}
    </button>
</div>

export default Cart

Component B

import React,{useState} from 'react'
import Cart from './Cart'

const CartShow = () => {
const [itemCount, setItemCount] = useState(0);
return (
<div style={{border: '2px solid red', background: 'black', width: '30%', margin: '100px', 
padding: '30px'}}>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" 
xmlns="http://www.w3.org/2000/svg">
    <path d="M9 22C9.55228 22 10 21.5523 10 21C10 20.4477 9.55228 20 9 20C8.44772 20 8 20.4477 
8 21C8 21.5523 8.44772 22 9 22Z" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
    <path d="M20 22C20.5523 22 21 21.5523 21 21C21 20.4477 20.5523 20 20 20C19.4477 20 19 
20.4477 19 21C19 21.5523 19.4477 22 20 22Z" stroke="white" stroke-width="2" stroke- 
linecap="round" stroke-linejoin="round"/>
    <path d="M1 1H5L7.68 14.39C7.77144 14.8504 8.02191 15.264 8.38755 15.5583C8.75318 15.8526 
9.2107 16.009 9.68 16H19.4C19.8693 16.009 20.3268 15.8526 20.6925 15.5583C21.0581 15.264 
21.3086 14.8504 21.4 14.39L23 6H6" stroke="white" stroke-width="2" stroke-linecap="round" 
stroke-linejoin="round"/>
  {itemCount}</svg>
    <Cart itemCount={itemCount} setItemCount={setItemCount} />
</div>
)
}

export default CartShow

Edit: to show the numbers on on the cart, check this link: How to put the number at top right corner of cart icon?