From the course: Rendering Data in React
Join today to access over 24,800 courses taught by industry experts.
Rendering elements based on conditions - React.js Tutorial
From the course: Rendering Data in React
Rendering elements based on conditions
- [Instructor] Sometimes you only want to show something when a condition is met. Often, actually. For example, you could show a message when a list is empty, or hide a button if the user is not logged in, or the form is not filled out completely. This conditionally showing is called conditional rendering. It means that we're showing or hiding elements based on a condition. You can handle conditional rendering using simple if statements inside your components, or more often directly inside JSX, using ternary operators or the Boolean operator, &&. Here's an example where a list of movies is shown, but only if there are any movies in the list. Inside the MovieList component we're looping over all the movies with the map method on line 23. But as you can see, this is actually wrapped in something. On line 21, we start a ternary statement, and we say if the length of movies is bigger than zero, in that case, we render the list. Then on line 27, we have the colon, which is going to specify…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.