FAQ: Components and Advanced JSX - Use this in a Component

[wiki-bot]

This community-built FAQ covers the “Use this in a Component” exercise from the lesson “Components and Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Use this in a Component

• What happens if I don’t use this when referencing a method from inside a class?

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[aravindkavin]

get test1() { //getter function
//something
}
test2() { //normal function
//something
}

Inside render what is the difference between “get function ( {this.test1} ) and normal function ( {this.test2()} )” calling? And which is the best practice when we want to call a function inside a render by default?

[gureesu]

Why is the getter method above render() ?

[h_o_s]

there is no technical reason, you can put the render method at the top of your class, and thanks to javascript hoisting

“variables and function declarations are moved to the top of their scope before code execution”

so your code will work but sure for more readability put your render method at the bottom.

[h_o_s]

We are using getters to add extra logic to properties before getting their values, say you want to format these values before getting them or something like that.

The getter method will execute when you want to get this value with dot like student.name, it will return your getter return’s value.

that’s why we don’t use () here because your getter method is executing when you want to get the value by dot.

@aravindkavin

( {this.test1} )

=========================================
using a normal function to get a variable is like any function you will need to call it to get its return. that’s why we are using () here

@aravindkavin

{this.test2()}

=====================================================
when should you use get keyword vs using a normal function(method) as a getter:

every method has a benefits, get keyword affect dot.

but normal function will not affect the dot sign so you will still able to get the original value with dot and the formatted with your function call.

you need to know both tools so you can use any of them when you need them.

and please, there is a tool in the forums to format your code to make it more readable, I think you don’t know this tool. You see how it’s really useful to know as many tools as you can?

[ngwolfhare]

Here’s a good refresher on this in case you forgot.

and in a constructor

[alvaro_l]

These videos are pure gold! Thansk @ngwolfhare !