When you have an input field intended to be filled out with a 10 digit phone number it’s nice to format the number automatically as the number is being typed in.

I type 1234567890 into the field, and it automatically formats it as I type to (123) 456-7890.

  updatePhone(e) {
    let value = e.target.value;
    let field = e.target.dataset.field;

    if (value === '') {
      this.setState({ phoneNumber: value });
    } else {
      if (value.length > 1 && !(/[)]/).test(value) && value.length < 6) {
        value = value.slice(0, value.length - 1);
      }
      value = value.replace(/[( )-]/g, '');
      let regexp = /[^0-9]/;
      if (!regexp.test(value)) {
        if (value.length > 0) {
          value = "(" + value;
        }
        if (value.length === 0) {
          // do nothing
        } else if (value.length < 5) {
          value = value + ")";
        } else {
          value = value.slice(0, 4) + ") " + value.slice(4);
        }
        if (value.length > 9) {
          value = value.slice(0, 9) + "-" + value.slice(9);
        }
        this.setState({ phoneNumber: value });
      }
    }
  }

Here is an example of how to call the function from render input element.

render(){

let phoneNumber = this.state.phoneNumber;

return 
(<label>
  <span>Cell Phone</span>
  <input
    type="text"
    maxLength="14"
    data-field="phoneNumber"
    value={phoneNumber}
    onChange={this.updatePhone}
  />
</label>)

}