A common practice in React applications is to render certain components based on certain conditions. In this video, you can see that though you have already used ternary if statements to render strings, you can use this pattern to render components.
- [Instructor] We've already used a bit…of conditional rendering in our app.…Here, we use a ternary if statement…to see if this.state.open is true.…If so, we will display open.…If it's false, we'll display closed.…This same pattern of conditional rendering…can also be used with components.…We might want to display different components…given different conditions.…For example, let's create a couple…of quick display components here.…Now the first of these is going to be a function…called Hiring and Hiring is going to return the following.…
Just a quick note about the syntax…for these function components.…With our book component, we're using the arrow function…and we're wrapping all of these JSX elements…with a return statement.…Now we can always create our function components like that…but sometimes you'll see components created like this.…Instead of adding the extra curly braces in the return,…you can return these directly.…So I could say div Hiring or add multiple different lines…here, I could do something like this…
- 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.