How to call a function in the render function?

Dedpul Published at Dev

Dedpul

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

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>
    )
}

}

Collected from the Internet

Please contact [email protected] to delete if infringement.