5

i have a classic functionnal component returning what will be rendered in JSX

function Search(){

    const loadFilms = function (){
         console.log(this)); // logs undefined
    };

    return(

            <View style= {styleAreas.view}>
                <TextInput style= {styleAreas.textinput} placeholder='Type your movie ' />
                <Button title='Search' onPress= {()=> { console.log(this);loadFilms();} } />  // logs undefined
                <FlatList    
                data={films}
                keyExtractor = {item => item.id.toString()}
                renderItem={({item}) => <FilmItem filmDesc = {item} />} 
                />
            </View>

        )
}

so i'm learning JS / React, and what i don't understand why this is undefined but when we run it since Class Search extends React.Component {}. it returns the right instance. especially that i tought that in JS ( i'm maybe over simplifying) a class is a function with pre-configured prototypes etc...

thank you for your explanations :)

2

2 Answers 2

2

The reason for that is that loadFilms is a function different from your 'Class'. Therefore, it has a different this context. Since you seem to use strict mode, it's undefined. You could pass it explicitly by using the call method.

function Search(){

    const loadFilms = function (){
         console.log(this)); // logs undefined
    };

    return(

            <View style= {styleAreas.view}>
                <TextInput style= {styleAreas.textinput} placeholder='Type your movie ' />
                <Button title='Search' onPress= {()=> { console.log(this); loadFilms.call(this);} } />  // logs undefined
                <FlatList    
                data={films}
                keyExtractor = {item => item.id.toString()}
                renderItem={({item}) => <FilmItem filmDesc = {item} />} 
                />
            </View>

        )
}
2

I believe you are mistaken because your function is not extending the Component class.

A react component class would begin with the declaration as so:

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

Class components are functions, but your function is not extending the component class.

5
  • class is just syntactical sugar. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Commented Jun 2, 2020 at 23:20
  • I don't use react native, so forgive me if I'm out of my element here, but in React, a class is actually quite different than a so-called functional component. Because you are extending the class Component from the react library it will behave differently. In JavaScript what 'this' refers to in a function depends on where the function was called, but if function is extended from the Component class than it would refer to the class as if it were bound to it (I believe). Commented Jun 2, 2020 at 23:23
  • Was going to edit my comment but I waited too long. I was wrong about the binding. Component class 'this' would be used to bind methods (unless a fat arrow function was used in the declaration). I don't have a great grasp on 'this' because I've only been using JS for a couple years. Commented Jun 2, 2020 at 23:29
  • 1
    Sorry, maybe I was too harsh here. I took it a bit out of the context of using react. Commented Jun 2, 2020 at 23:32
  • From the OP -> Class Search extends React.Component {} <- this leads me to believe he is under the assumption his Search function is inheriting from Component class, but I don't believe it is. I may be reading the question wrong. Commented Jun 2, 2020 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.