Practice questions of useState

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