Tengo un componente dividido en componentes más pequeños. Al hacer clic en el botón Agregar, necesito eliminar la selección de todos los niños rojos activos.

La selección es manejada por className topping-false o topping-true (gancho useState). Entonces, de hecho, necesito cambiar todos los nombres de clase a falsos, si los hay. ¿Cómo puedo hacerlo?

 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;

Hay un código principal:

 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;