# Step 1.7 - Types and creating a UI-driven state (Exercise)

If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 1 step 7 to see results.

## TodoFooter

1. Open TodoFooter and write a `TodoFooterProps` interface. It should include two values, a `clear` and `todos`. Use this interface in the function props like this: `(props: TodoFooterProps)`

2. Write an `_onClick` function that calls `props.clear`.

  - Since TodoFooter is not a class, the `_onClick` function needs to be stored in a const placed before the `return`.
  - Remember to use an arrow function to define this click handler.

3. Assign `_onClick` to the button's `onClick` prop. You won't need to use `this` since the component isn't a class.

4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button.

## TodoHeader

1. Open TodoHeader and write `TodoHeaderProps` which will include `addTodo`, `setFilter` and `filter`. Replace the first `any` in the class declaration with this interface.

2. This component also has state. Write `TodoHeaderState` (there's just one value), and add this where the second `any` was.

3. Add `_onFilter` to each of the filter buttons

  - Note that we can't add new parameters to onClick, but we can pull information from the event target!
  - Remember to use an arrow function for this one too

4. Call `_onAdd` from the submit button

5. Check out this new functionality! We can now add and filter todos!