Practice questions of useState

Below are useState coding practice questions from easy → advanced. Try to build each one yourself.

Easy Level-

1. Counter App

• Create a counter starting at 0
• Buttons: Increment, Decrement, Reset

2. Input Text Preview

• Input field
• Show typed text live below
• Add a Clear button

3. Toggle Button

• Button toggles between ON / OFF
• Change button text based on state

4. Show / Hide Password

• Password input
• Button toggles text visibility

5. Like Button ❤️

• Toggle like / unlike
• Show total likes count

Medium Level

1. Character Counter

• Textarea input
• Show character count
• Limit: 100 chars

2. Todo List (Basic)

• Input + Add button
• Display list of todos
• Clear input after adding

3. Background Color Changer

• Buttons: Red, Green, Blue
• Change page background color using state

4. Login Form Validation

• Email & Password inputs
• Show error if fields are empty
• Show success message on submit

5. Dropdown Selection

• Select dropdown (City)
• Display selected city name

Advanced Level

1. Todo List (Add + Delete)

• Add todos
• Delete individual todo
• Use array state

2. Counter with Step Value

• Input step value
• Increment counter by step amount

3. Multiple Input Form

• Name, Email, Age
• Store form data in single state object
• Display entered values

4. Shopping Cart Quantity

• Product with + / – buttons
• Update quantity and total price

5. Dark / Light Theme Switch

• Toggle theme
• Change background & text colors

Challenge (Interview Favorite)

1. Dynamic List

• Input number
• Generate list from 1 → N
• Update on change

2. Stopwatch

• Start / Stop / Reset timer
• Use useState (no libraries)

3. Editable Text

• Click text → convert to input
• Save updated text on blur

4. Accordion

• Expand / Collapse sections
• Only one open at a time

5. Simple Calculator

• Two inputs
• Buttons: + – × ÷
• Display result using state