Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Password Checker with useRef

    Challenge workspace

    20-30 min
    Lists and formsPath 10/40
    FormsConditional renderingRefs

    Suggested first

    Repair the Announcement Composer

    Your workspace must pass its server-side browser checks to complete this challenge.

    Password Checker with useRef

    Build an on-demand password checker that reads from an uncontrolled input.

    Provided test hooks

    • Keep password-input on the password field.
    • Keep password-summary on the rule-count message.
    • Keep password-strength on the strength message shown after checking.
    • Keep the button text Check password and Clear.

    Requirements

    • Store the password input element in a useRef value.
    • Read the current password only when Check password is chosen.
    • Test length, uppercase, number, and symbol rules independently.
    • Display how many of the four requirements pass.
    • Display Strong password only when all four requirements pass.
    • Clear the input and rendered result when Clear is chosen.

    What to explain

    Explain why changing an uncontrolled input does not update React state on every keystroke, and why checking or clearing through the ref does not require a controlled value prop.

    Progressive hints

    1. Read the field from passwordRef.current?.value.
    2. Store an array of four booleans after checking.
    3. Count passing rules with filter(Boolean).length.

    Reference solution notes

    The reference keeps only the latest rule results in state. The password itself remains in the input element and is read through the ref when requested.