title: How can I show a button when another element has focus?
body: <p>I have multiple rows, each row contains two text inputs and a button. When user focuses on one of the inputs, the button should be shown. When elements lose focus, the button should become invisible once again. My best attempt:</p>
  <pre><code>const Input = ({inputRef}) =&gt; {
    return (
      &lt;&gt;
        &lt;h1&gt;Input&lt;/h1&gt;
        &lt;input type=&quot;text&quot; ref={inputRef}/&gt;
      &lt;/&gt;
    )
  }
  
  export default () =&gt; {
    const firstRef = useRef(null);
    const secondRef = useRef(null);
    const it = useRef(null);
  
    const [editing, setEditing] = useState(false);
  
    function handleClick(e) {
      firstRef.current.focus();
    }
  
    function handleSave() {
      console.log(&quot;saving!&quot;);
    }
    
    function checkFocus(e) {
      if (!it.current.contains(document.activeElement)) {
        setEditing(false);
      } else {
        setEditing(true);
      }
    }
  
    useEffect(() =&gt; {
      document.body.addEventListener(&quot;focus&quot;, checkFocus, true);
  
      return () =&gt; {
        document.body.removeEventListener(&quot;focus&quot;, checkFocus, true);
      }
    }, []);
  
    return (
      &lt;div ref={it}&gt;
        &lt;Input inputRef={firstRef}/&gt;
        &lt;Input inputRef={secondRef}/&gt;
  
        &lt;button type=&quot;button&quot; onClick={handleSave} style={{visibility: editing ? &quot;visible&quot; : &quot;hidden&quot;}}&gt;Save&lt;/button&gt;
        &lt;button type=&quot;button&quot; onClick={handleClick}&gt;Edit&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Is there any better/more elegant and efficient way of achieving this?</p>