Vou dar alguns exemplos de como vc pode fazer isso
- Vc pode utilizar o hook useState no Parent, ai a função que seta esse state vai ser passada para os componentes, para que eles possam alterar o valor daquele state que está no Parent.
- Vc pode usar tbm Redux, que seria um estado global onde todos os componentes podem receber os dados salvos em um state global (mas isso seria bom caso vc queira fazer algo mais complexo).
- Vc tbm pode usar o ContextAPI, que tem uma lógica parecida do Redux, mas é mais simples de utilizar.
Um exemplo disso com hooks seria esse:
O código pra vc testar está no link
import React, { useState } from 'react';
function Parent() {
const [checked, setChecked] = useState(false);
console.log(checked);
return (
<Child2 props={ [checked, setChecked] } />
)
}
function Child2({props}) {
const [ checked, setChecked ] = props;
return (
<Child1 props={ [checked, setChecked] } />
)
}
function Child1({props}) {
const [ checked, setChecked ] = props;
const onInputChange = (event) => {
setChecked(!checked);
}
return (
<input
type="checkbox"
disabled={props.isDisabled}
defaultChecked={checked}
onChange={onInputChange}
/>
)
}