Local methods can be added to components as well. In this video, you can take a closer look at local methods and how to bind this within the component class.
- [Instructor] In addition to properties,…we can add methods that are local to these components.…Currently, we're displaying our goal value,…but I actually want to calculate…how far I am toward reaching my goal.…Am I 50% there, 10%, how am I doing so far?…So to do this, let's create those methods here…within our class component.…Now, the first one is going to be called getPercent,…and getPercent is going to take in a decimal,…and it's going to return the following,…we're going to say return decimal times 100,…and then we'll concatenate on a percentage symbol.…
Next, I'm going to create another one called calcGoalProgress.…And calculate goal progress is going to take…in the total number, the goal number,…and it's going to create a percent.…So here, we'll say return this.getPercent,…and we'll divide total by the goal.…Now we can use this within the component.…So we'll say, this.calcGoalProgress,…and we're going to pass in total…and goal, as our arguments.…
This is going to return that percent.…Now the final thing I can do, is I can say goal progress,…
- Refactoring elements with JSX
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Conditional rendering
Skill Level Intermediate
1. What Is React?
2. Introduction to React Elements
3. React Components
4. Props and State
5. Additional Library Features
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.