Introduction

In the previous chapter, we have built applications with relatively complex forms and all of that featured information that always got displayed; as in, there was no hidden data involved. In many applications, however, there tends to be portions of the app where the data is hidden and isn't loaded until you perform some action. You can do this in a few ways using other web development languages that are not typically the best choices. For example, you could hide elements on a web page with CSS using display:none; but then those sections would still show up if people viewed the source or overrode those CSS rules in your browser. Therefore, this would not be a great way to tackle the situation. Instead, we can rely on writing good JavaScript and React code to only display certain elements or components when it is appropriate, using conditional rendering.

In addition, you will frequently find yourself in a position where you need to display the same elements multiple times on a web page. Sure, you could copy and paste a bunch of times and hope you have gotten the number of elements correct, but it is far cleaner and easier to use loops in React to display multiple repetitive elements.

There are, of course, a few things you will need to be mindful of as you implement these features, but ultimately, they are pretty simple little things you need to remember, and we will cover them throughout the course of this chapter.