// src/App.jsx
import { useState } from "react";

function LiveEcho() {
  const [text, setText] = useState("");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

function App() {
  return <LiveEcho />;
}

export default App;

/*
  Notes:
  - handleChange reads event.target.value — the input's current text
    at the moment the change event fired — and stores it in state.
  - Because text is state, updating it re-renders the component, so
    the paragraph below always shows the latest typed value.
*/