mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00

Files

Micah Godbolt 7cea32428e Rewrite of Day 1 to use modern React (#294 )

* update to hooks

* more class to function

* cleanup

* finish ts final

* update html lesson

* add lessons page

* clean up

* move getters into context

* adding type

* fix bug

* step 5 cleanup

* init final pass

* text tweak

* fix ternaries

* readme cleanup

* fixed root readme

2022-01-13 09:22:50 -08:00

src

Rewrite of Day 1 to use modern React (#294 )

2022-01-13 09:22:50 -08:00

index.html

set up demo, exercise, final folders

2019-02-21 21:49:50 -08:00

README.md

Rewrite of Day 1 to use modern React (#294 )

2022-01-13 09:22:50 -08:00

README.md

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

Open TodoFooter and write a TodoFooterProps interface. It should include two values, a clearCompleted and todos. Use this interface in the function props like this: (props: TodoFooterProps)
Write an handleClick function that calls props.clear.
Assign handleClick to the button's onClick prop.
Test out this functionality. Check a few todos complete and click the Clear Completed button.

TodoHeader

Open TodoHeader then write and use the TodoHeaderProps which will include addTodo, changeFilter and filter.
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!

Call onSubmit from the submit button
Check out this new functionality! We can now add and filter todos!