In this video, you iterate on our library component by dynamically rendering child components based on the data. Each time there is another book present in the data, you can render another component.
- [Instructor] In the last video, we showed how to…compose components, how to use the library component…to display multiple different book components.…Let's make this a little bit more of a real world use case…by creating an array of data and then displaying books…based on that data.…So let me show you what I mean by that.…We're going to create a value called BookList,…and this array will contain objects that describe…these books, so again use whatever books you want,…at your own discretion.…
We then will add author…and finally we'll add pages, which is 260.…Now, I can take this and copy it and paste it…a couple times, just to save us a little time.…We're going to replace this with White Teeth,…and of course, your data is probably coming from…some sort of database or external file, so hopefully…you don't have to type it all, every time.…
Alright, so, this is our database right now.…Our array of data called the BookList.…Now, at this point, I'm going to scroll down…to our render method, and in the library tag,…
- 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.