How to call a function in the render function?

Question

If I try to call the fetchToken() function it just says that it is not a function. If I put it outside of the render function this.props is undefined and i'm not able to call it.

class LoginPage extends Component {


    componentDidMount() {
        Linking.addEventListener('url', this.handleOpenURL);
    }
    componentWillUnmount() {
        Linking.removeEventListener('url', this.handleOpenURL);
    }
    handleOpenURL(event) {
        let code = event.slice(22,86);
        console.log(code);
        this.fetchToken(code)
    }
  
  render() {

        function fetchToken(code) {
            this.props.actions.fetchToken(code)
        }
        
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableHighlight style={{backgroundColor: '#9b59b6', height: 70, padding: 20}} onPress={this.openAuth.bind(this)}>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: 'white', fontSize: 16}}>Authenticate with Dribbble</Text>
                    </View>
                </TouchableHighlight>
            </View>
        )
    }
}

purii · Accepted Answer · 2016-07-08 13:55:11Z

Bind this in Constructor

You have to bind the instance this to the function. It is recommend to do this in the constructor.

class LoginPage extends Component {
constructor(props) {
    super(props);
    this.handleOpenURL = this.handleOpenURL.bind(this);
}

componentDidMount() {
    Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
    Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL(event) {
    let code = event.slice(22,86);
    console.log(code);         
    this.props.actions.fetchToken(code);
}

 render() {

    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableHighlight style={{backgroundColor: '#9b59b6', height: 70, padding: 20}} onPress={this.openAuth.bind(this)}>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{color: 'white', fontSize: 16}}>Authenticate with Dribbble</Text>
                </View>
            </TouchableHighlight>
        </View>
    )
}

}

Jeremy Colin · Accepted Answer · 2016-07-08 14:41:57Z

5

There is an even cleaner solution: use ES6 arrow functions:

handleOpenURL = (event) => {
    let code = event.slice(22,86);
    console.log(code);         
    this.props.actions.fetchToken(code);
}

fetchToken = (code) => {
    this.props.actions.fetchToken(code)
}

And if you are wondering why you do not need it for componentDidMount or componentWillUnmount, it seems that since they are part of the component lifecycle, they are autobinded, but you can also still write them as arrow functions.

answered Jul 8, 2016 at 14:41

Jeremy Colin

4642 silver badges5 bronze badges

1 Comment

Ludwig Bossle Over a year ago

Thanks I'll try that.

Collectives™ on Stack Overflow

How to call a function in the render function?

2 Answers 2

Bind this in Constructor

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Bind this in Constructor

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related