Привет и добро пожаловать в StackOverflow. В вашем CodeSandbox я вижу, что вы начали использовать React Hooks. Кроме хука useState у нас есть useEffect, который будет срабатывать после изменения зависимости. Вы можете добиться этого, используя этот хук.
Просто добавьте новую опору в ваш дочерний компонент, эта опора будет содержать значение состояния для родителя, мы назовем это parentValue. Это ваш родительский компонент
//Parent.jsx
//your code
{childrentdata.map(x => (
<ChildComponent
name={x.name}
buttonOn={state.ParentOn}
parentValue={state.ParentOn}
/>
))}
Затем в ваш дочерний компонент добавьте хук
useEffect(() => {
setState(prevState => ({ ...prevState, buttonOn: props.parentValue }));
}, [props.parentValue]);
Хук будет наблюдать за реквизитами и изменениями состояния, которые мы указываем в зависимости массива как Второй аргумент. Таким образом, каждый раз, когда изменяется родительский переключатель, он будет изменять всех дочерних элементов. Я внес изменение, если вы заметили, что я использую обратный вызов внутри вашего setState, так мы можем получить фактическое значение для состояния, не получая устаревшего значения. Поэтому рекомендуется использовать этот обратный вызов для предотвращения побочных эффектов.