The React Workshop

3. Conditional Rendering and for Loops

Overview

In this chapter, we will implement conditional rendering and various looping techniques in React. You will be able to use conditional rendering in your React application via inline ternaries in JSX and guard clauses. Furthermore, you will be able to programmatically design new components using for loops to create lists of components efficiently. Eventually, you will develop an application to handle complex states in React.

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