title: Mobile number masking in React
body: <p>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?</p>
  
  <pre><code>class NumberCheck extends Component {
      state = {
          disabled: true,
          errorBlock: 'none',
          mobileNumber: '',
          error: ''
      };
  
  handleOnChange = (event) =&gt; {
      let disabled = event.target.value ? disabled = false : disabled = true;
      this.setState({
          disabled: disabled,
          mobileNumber: event.target.value
      })
  }
  
  submit = (e) =&gt; {
      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 &lt;Spinner /&gt;
      }
      if (isError) {
          return &lt;ChangePlanError /&gt;
      }
      return (
          &lt;form className="spring spring--sm"&gt;
              &lt;p className="heading heading--3 heading--center no-gutter--top"&gt;{"Already with Vodafone?"}&lt;/p&gt;
              &lt;p className="heading--center"&gt;{"Sign in using a TXT code to check if you are eligible to upgrade or change your plan"}&lt;/p&gt;
              &lt;div className="alert alert--light alert--warning alert--arrow validation__warning" style={{ display: this.state.errorBlock }}&gt;
                  &lt;div className="caption"&gt;
                      &lt; div className="caption__media caption__media--top alert__media" &gt;
                          &lt;svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers"&gt;
                              &lt;use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" /&gt;
                          &lt;/svg&gt;
                      &lt;/div&gt;
                      &lt;div className="caption__text caption__text--top alert__text"&gt;
                          {this.state.error}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;input
                  type="text"
                  onChange={this.handleOnChange}
                  className="form__input form__input--dark"
                  name="mobileno"
                  placeholder="021 1234567"
                  mask="000 000 0000" /&gt;
              &lt;div id="submit" className="form__row form__row--medium gutter--bottom"&gt;
                  &lt;input
                      type="submit"
                      className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`}
                      value=" Continue"
                      onClick={this.submit} /&gt;
              &lt;/div&gt;
          &lt;/form &gt;
      );
  }
  </code></pre>
  
  <p>}</p>