react_mystery.tsx

import { useState } from 'react'

function Child(props: { close: () => void }): JSX.Element {
    return (
        <button onClick={props.close}>click me to close</button>
    )
}

export default function Parent(): JSX.Element {
    // this doesn't work
    let [state, setState] = useState(false)
    let open = () => { setState(true) }
    let close = () => { setState(false) }
    let expanded = () => state

    // but replacing the definition of close with
    // let close = () => { window.setTimeout(() => setState(false), 0) }
    // fixes it

    return (
        <a onClick={open}>
            <p>click me to open</p>
            {expanded() && <Child close={close} />}
        </a>
    )
}