Thanks @Fran-Diox It’s fixed man. :wink:

@eknoes Thanks man. You save me.
If you have time please see this other question too:
https://community.onsen.io/topic/1009/manage-splitterside-for-use-it-as-reusable-component

@argelius , @munsterlander , @Fran-Diox , @eknoes
I finally success to reproduce my issue here for provide others check that.
You can see this CodePen:
https://codepen.io/anon/pen/ObRzLB?editors=0011
Open console and see this error: TypeError: enterPage is undefined

Any Suggestion? Is it a bug or my code is wrong?

Thanks @munsterlander for your attention. So I’m waiting for @argelius and other guys for reply.
I think OnsenUI React version needs some more docs and example.

Thanks @munsterlander , @Fran-Diox for your reply,
@Fran-Diox unfortunately resetPage not working when return Warning: flattenChildren(...): Encountered two children with the same key,... I test almost anything but still my SideMenu not working well after some page changes.
I don’t know why but sometimes also it’s return TypeError: enterPage is undefined. :cry:

Guys I need your help. :cry:

Hi @argelius , @munsterlander,
Is it possible to pass some props to component through navigator?
For example:

navigator.pushPage({
                component: login,
                key: 'Login_Index',
                role: role
            });

And access role with this.props.role.
Please guide me man.

@argelius @Fran-Diox @munsterlander guys can you help me to fix this issue?

Warning: flattenChildren(...): Encountered two children with the same key, `Page1_Index`. Child keys must be unique; when two children share a key, only the first child will be used.
    in ons-navigator (created by Navigator)
    in Navigator (created by App)
    in Appmodules.js:48127:9

uncaught exception: Splitter side is locked.(unknown)

Why children with same key exist when I use navigator.resetPage? Is it a bug?
What is uncaught exception: Splitter side is locked.(unknown)?

new version (previous reply) return this error:

Warning: flattenChildren(...): Encountered two children with the same key, `Page1_Index`. Child keys must be unique; when two children share a key, only the first child will be used.
    in ons-navigator (created by Navigator)
    in Navigator (created by App)
    in Appmodules.js:48127:9

uncaught exception: Splitter side is locked.(unknown)

Any suggestion?

I change my code as bellow any idea or improvement??

import { Meteor } from 'meteor/meteor';
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui';
import { Random } from 'meteor/random';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';

class SideMenu extends Component {
    constructor(props) {
        super(props);

        this.renderToolbar = this.renderToolbar.bind(this);
        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);
        this.goto_page1 = this.goto_page1.bind(this);
        this.goto_page2 = this.goto_page2.bind(this);

        this.state = {
            isOpen: false
        };
    };

    renderToolbar() {
        return (
            <Toolbar>
                <div className='left'>
                    <ToolbarButton onClick={this.show}>
                        <Icon icon='ion-navicon, material:md-menu' />
                    </ToolbarButton>
                </div>
                <div className='center'>{this.props.pageTitle}</div>
            </Toolbar>
        );
    };
    
    hide() {
        this.setState({isOpen: false});
    };
    
    show() {
        this.setState({isOpen: true});
    };
    
    goto_page1() {
        this.props.navigator.resetPage({
            component: page1,
            key: 'Page1_Index'
        });
    };

    goto_page2() {
        this.props.navigator.resetPage({
            component: page2,
            key: 'Page2_Index'
        });
    };

    render() {
        return (
            <Splitter>
                <SplitterSide
                    style={{
              boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
          }}
                    side='left'
                    width={200}
                    collapse={true}
                    isSwipeable={true}
                    isOpen={this.state.isOpen}
                    onClose={this.hide}
                    onOpen={this.show}
                >
                    <Page>
                        <List
                            dataSource={[ 'page one', 'page two']}
                            renderRow={(title) => {
                            switch(title) {
                                case "page one":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page1} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                                case "page two":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page2} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                                default:
                                    return (
                                        <ListItem key={title} onClick={this.hide} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                            }
                        }}
                        />
                    </Page>
                </SplitterSide>
                <SplitterContent>
                    <Page renderToolbar={this.renderToolbar} >
                        {this.props.children}
                    </Page>
                    
                </SplitterContent>
            </Splitter>

        );
    }
}

SideMenu.propTypes = {
    navigator: PropTypes.object.isRequired,
    pageTitle: PropTypes.string.isRequired
};

export default SideMenu;

I also change my Page1 to:

import React, { PropTypes, Component } from 'react';
import { Icon, List, ListItem, ListHeader} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';


class page1 extends Component {

    render() {
        return (
        <SideMenu navigator={this.props.navigator} pageTitle="page 1 title">
                Page content here
        </SideMenu>

        );
    }
}

page1.propTypes = {
  navigator: PropTypes.object
};

export default page1;