Challenge: State Management

Complete this hands-on exercise to test your knowledge of state management in React Native.

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.