How to change cart icon state using React Hooks - reactjs

Question

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

Answer 1

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?

Answer 2

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