title: Dynamically adjust text input box width to fit reactjs
body: <p>I have a text input box that accepts text and I want to adjust the width dynamically based on the input width. Based on things I tried, I can get it to change easy enough, but the box doesn't 'hug' the text well and there's a gap that remains on the right side.</p>
  <pre><code>
  &lt;Input
    paddingHorizontal='8px'
    value={value}
    onChange={onChange}
    maxWidth='300px'
    minWidth='120px'
    width={value ? `${width}px` : 120px}
  
  /&gt;
  
  </code></pre>
  <p>Things that I have tried on the onChange handler to set the width that have not produced the desired effect:</p>
  <ol>
  <li>This one seemed the closest, and works great while text is expanding it fits really well.<br />
  <a href="https://i.stack.imgur.com/y5tFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5tFg.png" alt="enter image description here" /></a>
  However, when deleting it doesn't work so great and leaves extra white space on the side
  <a href="https://i.stack.imgur.com/RPspO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RPspO.png" alt="enter image description here" /></a></li>
  </ol>
  <pre><code>const onChange = event =&gt; {
      let currentWidth;
      //if text is being deleted
      if(value &amp;&amp; (value.length &gt; event.target.value.length)){
        currentWidth = event.target.scrollWidth - 5;
  
      } else {
        currentWidth = event.target.scrollWidth + 1;
      }
      setValue(event.target.value);      
      setWidth(currentWidth);  
  
  }
  </code></pre>
  <ol start="2">
  <li>This version leaves too much space on the side while typing
  <a href="https://i.stack.imgur.com/lmrDz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lmrDz.png" alt="enter image description here" /></a></li>
  </ol>
  <pre><code>const onChange = event =&gt; {
      //I've tried various numbers here besides 9
      let currentWidth = event.target.value.length * 9;
      setValue(event.target.value);      
      setWidth(currentWidth);  
  }
  </code></pre>
  <p>If you have any thoughts or suggestions on how to make the input box fit the text better please let me know.
  Thank you.</p>