Mobile number masking in React

Question

Hi need to masked mobile number when user enter the mobile number in input box it should be 021 121 4544 in this format. means there should be 021{auto space}121{auto space}4544 how can i build in react this functionality?

class NumberCheck extends Component {
    state = {
        disabled: true,
        errorBlock: 'none',
        mobileNumber: '',
        error: ''
    };

handleOnChange = (event) => {
    let disabled = event.target.value ? disabled = false : disabled = true;
    this.setState({
        disabled: disabled,
        mobileNumber: event.target.value
    })
}

submit = (e) => {
    e.preventDefault();
    if (this.state.mobileNumber.match(/^02[0-9]{6,11}$/)) {
        this.setState({
            errorBlock: 'none'
        })
        const payload = {
            msisdn: this.state.mobileNumber
        }
        this.props.checkNumber(payload);
    } else {
        this.setState({
            error: ' Please enter valid mobile no',
            errorBlock: 'block'
        })

    }

}

render() {
    const { isLoading, isError } = this.props;
    if (isLoading) {
        return <Spinner />
    }
    if (isError) {
        return <ChangePlanError />
    }
    return (
        <form className="spring spring--sm">
            <p className="heading heading--3 heading--center no-gutter--top">{"Already with Vodafone?"}</p>
            <p className="heading--center">{"Sign in using a TXT code to check if you are eligible to upgrade or change your plan"}</p>
            <div className="alert alert--light alert--warning alert--arrow validation__warning" style={{ display: this.state.errorBlock }}>
                <div className="caption">
                    < div className="caption__media caption__media--top alert__media" >
                        <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                        </svg>
                    </div>
                    <div className="caption__text caption__text--top alert__text">
                        {this.state.error}
                    </div>
                </div>
            </div>
            <input
                type="text"
                onChange={this.handleOnChange}
                className="form__input form__input--dark"
                name="mobileno"
                placeholder="021 1234567"
                mask="000 000 0000" />
            <div id="submit" className="form__row form__row--medium gutter--bottom">
                <input
                    type="submit"
                    className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`}
                    value=" Continue"
                    onClick={this.submit} />
            </div>
        </form >
    );
}

}

Answer 1

You can create a new string with previous string and replace it in the input.

const number = '0211214544';
const num = `${number.substring(0, 3)} ${number.substring(3, 6)} ${number.substring(6, number.length)}`;

console.log(num);

Created a working example in React.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    };
  }

  change = (event) => {
    let val = event.target.value;
    val = val.replace(/ /gm, '');
    console.log(val);

    let num = `${val.substring(0, 3)} ${val.substring(3, 6)} ${val.substring(6, val.length)}`;

    num = num.trim();

    this.setState({
      name: num
    });
  };

  render() {
    return (
      <div className="App">
        <input
          ref="inputName"
          value={this.state.name}
          onChange={this.change}
        />
      </div>
    );
  }
}

export default App;