Challenge: State Management

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.