Increment counter and make other counters 0 - reactjs

Question

I have created a counter component and using it in parent component four times.
Below is the code from Counter component
function NoTravellers({ label, chooseTraveller }) {
const [count, setCount] = useState(0);
const reduceCount = () => {
if (count === 0) {
return;
} else {
setCount((count) => count - 1);
}
};
const increaseCount = () => {
if (count >= 2) {
return;
} else {
setCount((count) => count + 1);
}
};
useEffect(() => {
if (count > 0) {
chooseTraveller(count);
}
}, [count]);
return (
<div className="flex justify-around mb-8 w-1/3">
<div>
<span className="font-semibold text-sm">{label}</span>
</div>
<div className="flex space-x-4 justify-center">
<MinusCircleIcon
className="w-6 h-6 text-[#33C5B4]"
onClick={reduceCount}
/>
<span className="text-base text-[#565656] font-semibold">{count}</span>
<PlusCircleIcon
className="w-6 h-6 text-[#33C5B4]"
onClick={increaseCount}
/>
</div>
</div>
);
}
export default NoTravellers;
And I'm using it in parent component like below -
<div className="flex flex-col justify-center">
<div className="flex justify-around">
<NoTravellers label="Adults" chooseTraveller={(traveller) => chooseTravellers(traveller, 1)} />
<NoTravellers label="Students" chooseTraveller={(traveller) => chooseTravellers(traveller, 2)} />
</div>
<div className="flex justify-around">
<NoTravellers label="Seniors" chooseTraveller={(traveller) => chooseTravellers(traveller, 3)} />
<NoTravellers label="Childrens" chooseTraveller={(traveller) => chooseTravellers(traveller, 4)} />
</div>
</div>
What I needed if users increase the value of one counter, the other three counters value will reset to 0.
How can I achieve this?
Thanks in advance....

Answer 1

The simplest solution is pulling the counts up into the parent that way you can easily modify them in one place. Then just pass the count down into each child.
If you store the state in the children modifying it together is difficult.
const Parent = () => {
const [counts, setCounts] = useState([0,0,0]);
const updateCount = (idx, count) => {
const newCounts = [0,0,0]
newCounts[idx] = count;
setCounts(newCounts);
};
return <>
{counts.map((count,idx) => <Child count={count} update={(count) => updateCount(idx, newCount)}/>}
</>
};
const Child = ({count, update}) => {
return <button onClick={() => update(count+1)}>{count}</button>
}
^ this is not tested code I didn't setup a real react project but you should be able to use the same concept in your setup.