Nested Conditional Rendering

We have implemented our first example of a dynamic app with conditional rendering, but there is a lot more we can do. In the preceding exercise, we just have a single state and a single portion of the code that is conditionally rendered, but what if we wanted to expand that further or have even more complex application states that we want to be represented in the UI?

Conditional rendering is very useful because we can actually use it at multiple nesting levels to have an app structure that is entirely dynamic.

In the next exercise, we are going to build out a quiz app where different questions will appear depending on your answers. We will be recording the state and modifying it as the user answers each question along the way.

Exercise 3.02: Building a Conditional Quiz App

Now we need to think about how we want to build up this quiz app for the user. We will display each question and the choices for each; when the correct answer is chosen...