100 JS Functions

Beginner

1. CurrentYear

2. SimpleCounter

3. DoubleNumber

4. CreateColor

5. DynamicGrid

6. DynamicPictureSize

7. RandomButton

8. TabbedNavigation

9. MathOperator

10. GuessTheNumber

11. BetweenDates

12. Reactions

13. FeedTheBunny

14. Countdown

15. ClickFast

16. SkillsForJobs

17. UsersTabel

18. TodoList

19. UserSearch

20. SpendingInfo

18.TodoList

Write a React component named TodoList that renders:

  • An input field and a button labeled "Add todo".

When the user enters a todo and clicks the button:

  • The new item is added to the list, shown above the input.
  • Each item includes a checkbox.

NOTE: You can have multiple todo's with the same text content.

Behavior:

  • If the checkbox is checked, the corresponding task is marked as done and displayed with a strikethrough style.
  • If the checkbox is unchecked, the task is marked as not done and shown with normal text styling.

Example 1

Input

No input props

Demo

Open demo in new window

You'll see test results here!