Boa tarde!
Gostaria de saber como solucionar este problema.
Tenho um componente filho que é como se fosse um menu. Ele contém botões e, atualmente - de acordo com o click nas funções que estão no componente pai - vai exibir outros componentes. Só que eu não quero que as funções abaixo fiquem no componente pai. Gostaria que tais funções ficassem no filho.
Funções:
const onChangeActive = (event, value) => {
setSelectionActive(value)
}
const onChangeType = (event, value) => {
setChartType(value)
}
Mas, se eu coloco no filho eu perco o acesso dos states e suas mudanças que preciso no pai. Os states são: chartType
e o selectionActive
. Por isso, preciso dos estados dele - que neste caso são chartType
e o selectionActive
- acessiveis no componente Pai.
Componente Filho:
const Filho ={type, buttonActive, onChangeType = () => { }, onChangeActive = () => { } ) =>{
return(
<ToggleButton value={type} onChange={onChangeType}>
<Button disabled={buttonActive===TABLE}>button 1</Button>
<Button disabled={buttonActive===TABLE}>button 2</Button>
</ToggleButton>
<ToggleButton value={buttonActive} onChange={onChangeActive}>
<IconButton>
<Span title="chart" />
</IconButton>
<IconButton>
<Span title="table" />
</IconButton>
</ToggleButton>
)}
Componente Pai:
const Pai = () => {
const [chartType, setChartType] = useState(1)
const [selectionActive, setSelectionActive] = useState(1)
const onChangeActive = (event, value) => {
setSelectionActive(value)
}
const onChangeType = (event, value) => {
setChartType(value)
}
return(
<Filho buttonActive={selectionActive}
onChangeType={onChangeType}
onChangeActive={onChangeActive} />
{selectionActive === SELECT_CHART ? renderOpcao1() : renderOpcao2()}
)
}
Como eu consigo tirar essas funções onChangeActive
e onChangeType
do pai, deixar no filho mas no pai continuar com acesso aos states chartType
e selectionActive
no componente pai?