title: React - How to format phone number as user types
body: <p>I need to format a 10 digit string to this format: '(123) 456-7890'.
  However, I need this to happen as the user types. So if the user has inputted only 3 digits, the input should display: '(123)'.
  If they've inputted 5 digits the input should display: '(123) 45'</p>
  
  <p>With my current code, the formatting only takes place after the 10th character is entered. I'd like it so that it formats it from the third character onwards.</p>
  
  <pre><code>const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
  
  const handleInput = (value) =&gt; {
    return (
      value.replace(phoneRegex, '($1) $2-$3')
    )
  }
  
  class FindASubscriber extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        value: ''
      }
    }
  
    render() {
      const { label, placeholder, feedback } = this.props
      const { value} = this.state
      return (
        &lt;div className="find__a__subscriber"&gt;
          &lt;FlexGrid&gt;
            &lt;FlexGrid.Col&gt;
              &lt;FlexGrid.Row&gt;
                &lt;Input
                  feedback={feedback}
                  label={label}
                  type="text"
                  pattern="[0-9]*"
                  placeholder={placeholder}
                  value={handleInput(value)}
                  maxLength="10"
                  onChange={
                   (event) =&gt; this.setState({value: event.target.value})
                  }
                /&gt;
              &lt;/FlexGrid.Row&gt;
            &lt;/FlexGrid.Col&gt;
          &lt;/FlexGrid&gt;
        &lt;/div&gt;
      )
    }
  }```
  </code></pre>