Handling States in React: Part 2

?? Hello ??

Handling Complex States in React

In the previous part I explained Using Objects to group similar states together vs using Individual States. Real World Applications are more complicated than just a simple counter and a text component. There will be many interactive elements that the user can engage with.

Take a look at the Image below.

Can you name all the dynamic UI elements in the above picture ?

.

.

.

.

.

.

.

That's right every element in the application is dynamic. We already have a design. Let's list all the components.

1. The Title of the quiz.
2. The sound Icon for the application
3. Countdown timer for the current question.
4. Current question and the total number of Questions
5. Question title
6. All the options for the title
7. Additionally we can also add an Image to the question

In the above list the user can interact with only few components.

1. The sound Icon for the Application
2. Selecting the correct option for the current question.

Stay tuned! Let's design an efficient state management system for this application together, step by step.

I will share code snippets and a working application where you can interact and experiment.

Until then, ??