We've added a TasksContainer to left-align to tasks in our app so that we'll have more room for action buttons on the right of the tasks.

Heading back to App.js, you'll see that we're just rendering static data, meaning it is not changing. Let's add some state to our app. This is where React's useState hook comes into play.

Think about how our state should be designed. What will be edited? How will we store this data in a JavaScript Object? Start by imagining a default task, what should appear when someone clicks "+ add task"? You'll define a NEW_TASK object here with keys and values containing this default state.

Your mission

Use the useState hook to initialize tasks as the array of data imported. When clicking on "add task", append a new element to this array, a copy of a variable NEW_TASK that contains a default task name.