React - refactoring class component to move parts to functional compontent

user_5558021 0
Viewed 59

I have following class component -

https://pastebin.com/WigZksAq

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.

reactjs javascript
1 Answers

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.

user_55580210
Related