cf.completefrontend

Predict the outputMedium

You type Hi into a note box that's defined inside its parent. What does it log and show?

App keeps the note's text in its own state. Note is defined inside App so it can read text and setText without props, and it logs when it mounts and unmounts. You click into the box and type two letters.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
export default function App() {
  const [text, setText] = useState("");
 
  function Note() {
    useEffect(() => {
      console.log("Note mounted");
      return () => console.log("Note unmounted");
    }, []);
 
    return (
      <label>
        Note <input value={text} onChange={(e) => setText(e.target.value)} />
      </label>
    );
  }
 
  return (
    <>
      <Note />
      <p>{text.length} characters</p>
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click into the Note box and type Hi.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…