Skip to content

Instantly share code, notes, and snippets.

@IVBakker IVBakker/main.js
Created Aug 21, 2018

Embed
What would you like to do?
OnsenUi Lifting state up not cascading
import React from 'react';
import ReactDOM from 'react-dom';
import ons from 'onsenui';
import {
Navigator,
Page,
BackButton,
Button,
Toolbar
} from 'react-onsenui';
class MomPage extends React.Component {
constructor(props) {
super(props);
this.state = {
counter : 0
}
}
onCounterClick = () => {
console.log(this.state.counter, "+1 on Mom")
this.setState({counter:this.state.counter + 1})
}
gotoDaughter = () => {
this.props.navigator.pushPage({'comp': DaughterPage,'props':{counter:this.state.counter, onCounterClick:this.onCounterClick}});
}
renderToolbar = () => {
return (
<Toolbar>
<div className='center'>Mom: {this.state.counter}</div>
</Toolbar>
);
}
render() {
return (
<Page renderToolbar={this.renderToolbar} >
<Button className='center' modifier='large outline' onClick={this.gotoDaughter}>Go to daughter</Button>
</Page>
);
}
}
class DaughterPage extends React.Component {
renderToolbar = () => {
return (
<Toolbar>
<BackButton className='left'></BackButton>
<div className='center'>Daughter: {this.props.counter}</div>
</Toolbar>
);
}
render() {
return (
<Page renderToolbar={this.renderToolbar} >
<Button className='center' modifier='large outline' onClick={this.props.onCounterClick}>Click me</Button>
</Page>
);
}
}
class App extends React.Component {
renderPage(route, navigator) {
route.props = route.props || {};
route.props.navigator = navigator;
return React.createElement(route.comp, route.props);
}
render() {
return (
<Navigator
initialRoute={{comp: MomPage}}
renderPage={this.renderPage}
/>
);
}
};
ReactDOM.render(<App />, document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.