Two-Way Form Binding

React

Junior

Controlled components

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

Requirements

State starts as an empty string.
The <input> (data-testid="echo-input") must be controlled.
Every keystroke immediately appears in <p data-testid="echo-display">.

Notes

Do not edit existing data-testid attributes: tests rely on them.

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

AI Analyzer