Controlled text input

Forms & Events — Beginner React challenge.

Wire up a fully controlled text input. The component must render the current value and its character length in dedicated test-id elements.

Requirements

• The input's value must be stored in React state (fully controlled).
• Render the current value inside data-testid="value".
• Render the character length inside data-testid="length".

Signature

function ControlledInput(): JSX.Element

Example

type "react" ⇒ value === "react", length === "5"

Constraints

• Do not use refs to read the value.
• No default HTML form behavior needed.