React Native this keyword

Question

I've recently started to learn React Native and I am stumbling on understanding what "this" keywords does. I know how it works in Java, but here it seems to be different. If someone could make things clear for me, I would be very thankful. Example code:

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

https://stackoverflow.com/questions/4195970/what-does-this-mean In MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — , Nov 23 '17 at 12:09
Possible duplicate of [What does "this" mean?](https://stackoverflow.com/questions/4195970/what-does-this-mean) — Maluen, Nov 23 '17 at 12:10
It works exactly the same ... `this` is a reference to your current class context — anteAdamovic, Nov 23 '17 at 12:11

score 0 · Answer 1 · answered Nov 23 '17 at 12:14

you need to bind your updateState function to the context in the render function. You could also define your updateState function cleaner.

Notice the .bind(this);

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }

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

   render() {
      return (
         <View>
            <Text onPress = {this.updateState.bind(this)}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

More info here

score 0 · Accepted Answer · answered Nov 23 '17 at 13:43

0

this keyword in Java usually maps to its parent Class.

in Javascript, it maps to its parent Function.

It's beautifully explained in MDN Docs

answered Nov 23 '17 at 13:43

AbodyRulez

14
2

React Native this keyword

2 Answers2