- [Instructor] In the previous video, we looked at how…to incorporate the component lifecycle into our app,…but let's make our component did mount function…a little bit more robust here.…So component did mount is a really excellent place…to fetch some data and that's exactly what we're…going to do.…So first let's add a couple keys to our state object here…on line 37, so I'm going to add a comma here and then…I'm going to add data which we'll set to an empty array…as our initial state and then we'll set a state…of loading as false.…
Now the next step I want to take is to adjust our component…did mount function to actually change the state…to handle the loading of data.…So step one here we're going to say this.setstate…and we're going to set the state of loading to true.…Next, we're going to use fetch and this is the browser's…version of fetch and we're going to fetch some data…from a rest API and we're going to use this API here,…so we'll type https…hplussport.com/api/products/order/price/sort/asc…for ascending and then we'll pass it a parameter…
- 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.