React - refactoring class component to move parts to functional compontent

Question

I have following class component -

I want to moving panels to separate files -

const Panel1 = props => (
    <Panel id='Panel1'>
    <PanelHeader>Panel 1</PanelHeader>
    <Group>
    <CellButton onClick={ () => this.setState({ activePanel: 'panel2' }) }>
        Go to panel 2
    </CellButton>
    </Group>
    </Panel>
);

But I don't understand how modify state of main class component.

In your parent, add a function that modifies the state. Now pass it as prop to the child. — , Sep 17 '20 at 12:03

score 2 · Accepted Answer · answered Sep 17 '20 at 17:14

Ok, I find the solution:

<Panel1 id='Panel1' go={active_panel => this.setState({ activePanel: active_panel })}></Panel1>

in parent component, and

<CellButton onClick={props.go.bind(this, 'panel2')}>
    Go to panel 2
</CellButton>

It's looks ugly but works, in the future I planned to start using redux.

React - refactoring class component to move parts to functional compontent

1 Answers1