Challenge: State Management
Complete this hands-on exercise to test your knowledge of state management in React Native.
We'll cover the following
This challenge will test your knowledge of state management in React Native. You’ll use these concepts to create a minimalistic user interface.
Task
Build a React Native application that has these functionalities:
-
If the user adds a new to-do, it should be appended at the end of the list. Moreover, on the successful addition of a to-do, an alert should be displayed with the message: “To-do added!” Note that a to-do should be added for these two conditions:
- User presses the “Enter” key.
- User clicks the “+” button.
-
If the user presses the “Enter” key while the text input box is empty, an alert should be displayed with the message: “Text field is empty!”
-
If the user clicks the “+” button while the text input box is empty, an alert should be displayed with the message: “Text field is empty!”
-
Once a new to-do has been added successfully, the text input box should return back to its original state, i.e., it should display “Add To-do…”
Expected output
The illustration below shows what the final output should look like after completing the challenge.
Get hands-on with 1200+ tech skills courses.