new to react native, trying to render the main page with a button on the navigation to go the user page.

var TourChampIOs = React.createClass({

    getInitialState() {
       ....
    },

    ponentWillMount() {

        ....
    },

    _handleUserDataPress: function() {

        // Get by ref not prop
        this.refs.nav.push({
            ponent: UserPage,
            title: 'User Page'
        });
    },    
   render: function() {

                return <NavigatorIOS
                    style={styles.container}
                    initialRoute={{
                        title: 'Tour Champ',
                        ponent: ThemeList,
                        rightButtonTitle: tc.user.displayName.split(' ')[0],
                        onRightButtonPress: this._handleUserDataPress
                    }}/>;

        }

the error i'm getting is Error: Cannot read property 'push' of undefined

new to react native, trying to render the main page with a button on the navigation to go the user page.

var TourChampIOs = React.createClass({

    getInitialState() {
       ....
    },

    ponentWillMount() {

        ....
    },

    _handleUserDataPress: function() {

        // Get by ref not prop
        this.refs.nav.push({
            ponent: UserPage,
            title: 'User Page'
        });
    },    
   render: function() {

                return <NavigatorIOS
                    style={styles.container}
                    initialRoute={{
                        title: 'Tour Champ',
                        ponent: ThemeList,
                        rightButtonTitle: tc.user.displayName.split(' ')[0],
                        onRightButtonPress: this._handleUserDataPress
                    }}/>;

        }

the error i'm getting is Error: Cannot read property 'push' of undefined

• javascript
• facebook
• react-native

Share Improve this question Follow asked Jul 4, 2015 at 10:26 WebQubeWebQube 8,9911212 gold badges5454 silver badges9797 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

you need to assign a ref attribute to your ponent when returned from render and give "nav" as its value

   render: function() {

                return <NavigatorIOS
                    ref="nav" // Here is the change
                    style={styles.container}
                    initialRoute={{
                        title: 'Tour Champ',
                        ponent: ThemeList,
                        rightButtonTitle: tc.user.displayName.split(' ')[0],
                        onRightButtonPress: this._handleUserDataPress
                    }}/>;

        }

I'm not sure what you are trying to do and if the use of refs is really adapted to what you want. I certainly would not use ref as a way to stock a reference of the page you want to go onclick.

I you still choose to do this ugly thing, just put the ref in the rendering function: Click This!

retrieve the ref in the handleClick function

handleClick = function() {
    doSomethingWithThisref(this.refs.UserPage);
    // or
    // set a new state for this ponent
    this.setState({someState:"somedata", function() {
        React.findDOMNode(this.refs.UserPage);
    });
}

ref is used to have a reference to the DOM instead of the virtual DOM returned by React render function. Here is a good example : https://facebook.github.io/react/docs/more-about-refs.html

By the way you can't access this.refs because you probably didn't set any ref in the render function. But, in my opinion, you shouldn't set refs dynamically with an handler but in the render function.

Hope it helps