OnsenUI 2 React version "TypeError: _ref is undefined"

[cyclops24]

Hi guys,
I’m very new in React, OnsenUI and ES6 but I try to use OnsenUI React version in Meteor.
I try to use @Fran-Diox OnsenUI Meteor ToDo App and do some change on that.
My question is:
This code is worked well for me:

import React, { Component, PropTypes } from 'react';
import { Page, Toolbar, BackButton, ToolbarButton, Icon, Button, Fab } from 'react-onsenui';
import ons from 'onsenui';
import { Random } from 'meteor/random';

const demoButtonIndex = ({navigator}) => {
    const handleClick = () => {
        ons.notification.alert('Hello world!');
    };

    const renderToolbar = () => {
        return (
            <Toolbar>
                <div className='left'>
                    <BackButton onClick={() => navigator.popPage()}>Table of Content</BackButton>
                </div>
                <div className='center'>Buttons</div>
                <div className='right'>
                    <ToolbarButton>
                        <Icon icon="ion-navicon, material:md-menu"></Icon>
                    </ToolbarButton>
                </div>
            </Toolbar>
        );
    };

    return (
        <Page renderToolbar={renderToolbar}>

            <section style={{margin: '16px'}}>
                <Button style={{margin: '6px'}} onClick={handleClick}>Normal</Button>
                <Button style={{margin: '6px'}} modifier='quiet'>Quiet</Button>
                <Button style={{margin: '6px'}} modifier='outline'>Outline</Button>
                <Button style={{margin: '6px'}} modifier='cta'>Call to action</Button>
                <Button style={{margin: '6px'}} modifier='large'>Large</Button>
            </section>

            <Fab position='bottom right'>
                +
            </Fab>
        </Page>
    );
};

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

export default demoButtonIndex;

But I don’t know why when I convert above code to standard react style it return error. This is my second code:

import React, { Component, PropTypes } from 'react';
import { Page, Toolbar, BackButton, ToolbarButton, Icon, Button, Fab } from 'react-onsenui';
import ons from 'onsenui';
import { Random } from 'meteor/random';

class demoButtonIndex extends Component {
    handleClick() {
        ons.notification.alert('Hello world!');
    };

    renderToolbar() {
        return (
            <Toolbar>
                <div className='left'>
                    <BackButton onClick={() => navigator.popPage()}>Table of Content</BackButton>
                </div>
                <div className='center'>Buttons</div>
                <div className='right'>
                    <ToolbarButton>
                        <Icon icon="ion-navicon, material:md-menu"></Icon>
                    </ToolbarButton>
                </div>
            </Toolbar>
        );
    };

    render({navigator}) {
        return (
            <Page renderToolbar={this.renderToolbar}>

                <section style={{margin: '16px'}}>
                    <Button style={{margin: '6px'}} onClick={this.handleClick}>Normal</Button>
                    <Button style={{margin: '6px'}} modifier='quiet'>Quiet</Button>
                    <Button style={{margin: '6px'}} modifier='outline'>Outline</Button>
                    <Button style={{margin: '6px'}} modifier='cta'>Call to action</Button>
                    <Button style={{margin: '6px'}} modifier='large'>Large</Button>
                </section>

                <Fab position='bottom right'>
                    +
                </Fab>
            </Page>
        );
    }

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

export default demoButtonIndex;

This is my console error:

TypeError: _ref is undefined

Why This return error?

[munsterlander]

Does it provide a line number or such? Usually (typically in the forums) undefined means the object hasn’t been attached to the DOM yet and the action is being called too early. Do you have any additional information that might assist? Unfortunately, React is not my forte.

[cyclops24]

Guys I search a lot, Is my code error related to this article?
http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes

[argelius]

In the renderToolbar() method you use a variable navigator but it doesn’t exist. Since it looks like you pass the Navigator component as a prop maybe you should do this.props.navigator instead.

Which line is causing the error?

[cyclops24]

@munsterlander unfortunately my last code refer to a unrelated line in window object.
@argelius You say a very important point man. Really thanks. :wink:
I change my code like below and now it’s working:

import React, { Component, PropTypes } from 'react';
import { Page, Toolbar, BackButton, ToolbarButton, Icon, Button, Fab } from 'react-onsenui';
import ons from 'onsenui';
import { Random } from 'meteor/random';

class demoButtonIndex extends Component {
    constructor() {
        super();
        this.renderToolbar = this.renderToolbar.bind(this);
    };

    handleClick() {
        ons.notification.alert('Hello world!');
    };

    renderToolbar() {
        return (
            <Toolbar>
                <div className='left'>
                    <BackButton onClick={() => this.props.navigator.popPage()}>Table of Content</BackButton>
                </div>
                <div className='center'>Buttons</div>
                <div className='right'>
                    <ToolbarButton>
                        <Icon icon="ion-navicon, material:md-menu"></Icon>
                    </ToolbarButton>
                </div>
            </Toolbar>
        );
    };

    render() {
        return (
            <Page renderToolbar={this.renderToolbar}>

                <section style={{margin: '16px'}}>
                    <Button style={{margin: '6px'}} onClick={this.handleClick}>Normal</Button>
                    <Button style={{margin: '6px'}} modifier='quiet'>Quiet</Button>
                    <Button style={{margin: '6px'}} modifier='outline'>Outline</Button>
                    <Button style={{margin: '6px'}} modifier='cta'>Call to action</Button>
                    <Button style={{margin: '6px'}} modifier='large'>Large</Button>
                </section>

                <Fab position='bottom right'>
                    +
                </Fab>
            </Page>
        );
    }

}

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

export default demoButtonIndex;

Is my coding style is standard now??

[cyclops24]

@Fran-Diox It’s very interesting for me that you also write OnsenUI Meteor ToDo App in React but why your coding style is very different?
Is that style have any advantage?
Can you explain your coding style name or some keyword about this?

[Fran Diox]

@cyclops24 I was also using classes at the beginning because I was following Meteor tutorial (they use classes there). But as @argelius told me, this syntax is much simpler so I just updated it. It requires the components to be stateless, though. If you need access to this.state, you will want ES6 classes. You can read about it here.

[cyclops24]

@Fran-Diox Thanks for your replay it’s very useful man. :hand:
@argelius is above coding style is standard now? I’m so happy if you tell my mistakes. :wink: