title: Auto-scaling input to width of value in React
body: <p>I want to have an input whose width adapts to fit its content.</p>
  <p>I'm trying to implement <a href="https://stackoverflow.com/a/38867270/5308892">this answer to a similar question</a>, but using React:</p>
  <pre><code>import React, { useState } from 'react';
  
  export default () =&gt; {
    const [content, setContent] = useState('');
    const [width, setWidth] = useState(0);
  
    const changeHandler = evt =&gt; {
      setContent(evt.target.value);
    };
  
    return (
      &lt;wrapper&gt;
        &lt;span id=&quot;hide&quot;&gt;{content}&lt;/span&gt;
        &lt;input type=&quot;text&quot; autoFocus style={{ width }} onChange={changeHandler} /&gt;
      &lt;/wrapper&gt;
    );
  };
  </code></pre>
  <p>The problem is I don't know how to then query the width of the span, in order to then change the width of the input (using <code>setWidth</code>).</p>
  <p>How can I achieve this?</p>