Two-Way Form Binding

React

Junior

Controlled components

Build a TwoWayBinding component that keeps an <input> element and a text display perfectly in sync through local React state.

Requirements:

Start with an empty string.
Every keystroke must immediately appear inside <p data-testid="echo-display">.
The <input> must be controlled.

Note:

Do not edit existing data-testid attributes on any element as tests rely on them.
Use these exact test IDs:
- input → data-testid="echo-input"
- echoed text → data-testid="echo-display"

App.js

import TwoWayBinding from "./TwoWayBinding";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-50 p-4 flex justify-center items-start">
      <TwoWayBinding />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here