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...