0

I need your help to explain about differences between arrow function and normal function in React Native code. Does this code :

 updateState = () => this.setState({myState: 'The state is updated'})

is equivalent with this one:

updateState () { 
    this.setState({myState: 'The state is updated'})  
}

if the answer is YES, why this code is working fine :

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  

export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState = () => this.setState({myState: 'The state is updated'})  
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}

but, why this code is not working?

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  

export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState () { 
        this.setState({myState: 'The state is updated'})  
    }
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}

but if the answer is NO, why both code below is working fine, when I change 

 onPressButton() {  
        Alert.alert('You clicked the button!')  
    }

to

 onPressButton = () => {  
        Alert.alert('You clicked the button!')  
    }

First Code :

import React, { Component } from 'react';  
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';  

export default class ButtonBasics extends Component {  
    onPressButton() {  
        Alert.alert('You clicked the button!')  
    }  

    render() {  
        return (  
            <View style={styles.container}>  
                <View>  
                    <Button  
                        onPress={this.onPressButton}  
                        title="Press Me"  
                    />  
                </View>                  
            </View>  
        );  
    }  
}

and second code:

import React, { Component } from 'react';  
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';  

export default class ButtonBasics extends Component {  
    onPressButton = () => {  
        Alert.alert('You clicked the button!')  
    }  

    render() {  
        return (  
            <View>  
                <View>  
                    <Button  
                        onPress={this.onPressButton}  
                        title="Press Me"  
                    />  
                </View>                  
            </View>  
        );  
    }  
}

Both above code is running perfectly

I'am really confused about this, and Need your help about this matter.

Thanks in advance

OverloadCloud
  • 11
  • 2
  • TL;DR; No, they are not equivalent because of how arrow functions capture `this`. The second example works because you are not using context in it (no `this` keyword) – Yury Tarabanko Apr 06 '20 at 23:38

1 Answers1

0
 updateState = () => this.setState({myState: 'The state is updated'})

is equivalent to

 updateState = function () { this.setState({myState: 'The state is updated'}) };

The difference is that the above is defining a property pointing to a function and this one

updateState () { 
    this.setState({myState: 'The state is updated'})  
}

defines a function with the name updateState which isn't visible.

Axel Amthor
  • 10,980
  • 1
  • 25
  • 44
  • Hi Axel, thanks for your reply. I just try your code, but it isn't working. And I Just updated my questions. Thanks in advance – OverloadCloud Apr 06 '20 at 23:30
  • No, arrow function is not equivalent to the normal function in this case (normal function won't actually work). Also the short hand syntax also defines a property just on a prototype. – Yury Tarabanko Apr 06 '20 at 23:41