How to change children on parent event?

Question

I have a component divided on smaller components. On click on add button I need to remove selection from all active red children.

Selection is handling by className topping-false or topping-true (useState hook). So in fact I need to change all classnames to false if there any. How I can do it?

const Topping = (props) => {
const {
    img,
    name,
    price,
} = props

const [chosenTopping, setChosenTopping] = useState(false);

const handleTopping = () => {
    setChosenTopping(!chosenTopping)
    !chosenTopping ? store.dispatch(addTopping({...})) : 
                          store.dispatch(deleteTopping(name))
}

return <div className={'topping-' + chosenTopping} onClick={() => handleTopping()}>
    <img className='topping__image' src={img} alt={`${name}`} />
    <div className='topping__text'>
        <div className='topping__info'>
            <h3 className='topping__name'>{name}</h3>
            <h4 className='topping__price'>${price}</h4>
        </div>
    </div>
</div>;
};

export default Topping;

There is parent code:

const BigCard = (props) => {
const {
    img,
    name,
    price,
} = props

const newId = () => Math.floor((1 + Math.random()) * 0x10000000)
    .toString(16)

const addToCart = () => {
    store.dispatch(addDish({...}))
    store.dispatch(clearToppings())
}


return <div className='big-card'>
    <div className='big-card__content' onClick={(e) => handleBigCard(e)}>
        <img className='big-card__image' src={img} alt='pizza_image' />
        <div className='big-card__info'>
            <h1 className='big-card__name'>{name}</h1>
            <p className='big-card__description'>Chicken pieces, bell peppers, cheddar and parmesan cheese mix, mozzarella, red onion, sweet chili sauce, alfredo sauce</p>
            <Toppings />
            <div className='big-card__button'>
                <MenuButton onClick={() => addToCart()}>
                    <h3 className='big-card__price'>Add to cart for ${fullPrice}</h3>
                </MenuButton>
            </div>
        </div>
    </div>
</div>;
};

export default BigCard;

Answer 1

const BigCard = (props) => {
const {
    img,
    name,
    price,
} = props
const [isSelection,setSelection]=useState(true) //added
const newId = () => Math.floor((1 + Math.random()) * 0x10000000)
    .toString(16)

const addToCart = () => {
    setIsSelection((isSelection)=>!isSelection) //added
    store.dispatch(addDish({...}))
    store.dispatch(clearToppings())
}


return <div className='big-card'>
    <div className='big-card__content' onClick={(e) => handleBigCard(e)}>
        <img className='big-card__image' src={img} alt='pizza_image' />
        <div className='big-card__info'>
            <h1 className='big-card__name'>{name}</h1>
            <p className='big-card__description'>Chicken pieces, bell peppers, cheddar and parmesan cheese mix, mozzarella, red onion, sweet chili sauce, alfredo sauce</p>
            <Toppings isSelection={isSelection} />
            <div className='big-card__button'>
                <MenuButton onClick={() => addToCart()}>
                    <h3 className='big-card__price'>Add to cart for ${fullPrice}</h3>
                </MenuButton>
            </div>
        </div>
    </div>
</div>;
};

export default BigCard;

add isSelection with other props in the Toppings like so:

 const Toppings=({isSelection})=>{
 let array=[]
  return array.map(val=> <Topping isSelection={isSelection} />  ) 
}

then you can access the isSelection in the Topping

const Topping = (props) => {
const {
    img,
    name,
    price,
    isSelection

} = props
const [chosenTopping, setChosenTopping] = useState(false)
useEffect(()=>{
setChosenTopping(false)
}
,[isSelection])
.
..
..
...

return <div className={'topping-' + chosenTopping} onClick={() => handleTopping()}>
    <img className='topping__image' src={img} alt={`${name}`} />
    <div className='topping__text'>
        <div className='topping__info'>
            <h3 className='topping__name'>{name}</h3>
            <h4 className='topping__price'>${price}</h4>
        </div>
    </div>
}