US Telephone Number Formatter

import React from 'react';
import { render } from 'react-dom';

class TelephoneField extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: '' };
  }

  handleChange(e) {
    const val = e.currentTarget.value;
    const replace = ('' + val).replace(/\D/g, '');
    const match = replace.match(/^(\d{3})(\d{3})(\d{4})$/);

    if (!match) {
      this.setState({ val: e.currentTarget.value });
    } else {
      const val = `(${match[1]}) ${match[2]}-${match[3]}`;
      this.setState({ val });
    }
  }

  render() {
    return (
      <input
        type='text'
        placeholder='Enter your phone number'
        onChange={e => this.handleChange(e)}
        value={this.state.val}
      />
    );
  }
}

render(<TelephoneField />, document.getElementById('app'));