Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

158
Views
How to change children on parent event?

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;
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!