title: How to make phone input with country code in React JS
body: <p><a href="https://i.stack.imgur.com/7ox2N.png" rel="nofollow noreferrer">For reference you can see this image I need something like this </a></p>
  <p>I am new and learning React JS and I want to take the phone input in +917896541230 or +91 78965412330 in this format, not in this +91 (123)789 654 0 or not in any other format  (&quot;I gave +91 as a exam of country code but it will accept all countries code around the world&quot;)  because then number stored in the database is in above format. I try to include jQuery but it did not work. I don't understand How to do this the npm packages I got all are in a different format which does not work for me.</p>
  <p>This is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import firebase from './firebase'
  import "./App.css";
  import { getDatabase, ref, child, get } from "firebase/database";
  // import PhoneInput from 'react-phone-number-input'
  
  class Login extends React.Component {
  
      // jQuery code
     
      // var phoneNumber = window.intlTelInput(document.querySelector("#phoneNumber"), {
      //         separateDialCode: true,
      //         preferredCountries:["in"],
      //         hiddenInput: "full",
      //         utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
      //         });
             
      //         $("#getCode").click(function() {
      //         var full_num = phoneNumber.getNumber(intlTelInputUtils.numberFormat.E164);
      //         $("input[name='phoneNumber[full]'").val(full_num);
          
      //         localStorage.setItem("Phone_No", full_num) 
      //         });
      //       
    handleChange = (e) =&gt;{
      const {name, value } = e.target
      this.setState({
          [name]: value
        })
        this.setState({ phoneNumber: value }, () =&gt; {
          console.log(this.state.phoneNumber);
        });
    }
    configureCaptcha = () =&gt;{
      window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
        'size': 'invisible',
        'callback': (response) =&gt; {
  
          // reCAPTCHA solved, allow signInWithPhoneNumber.
  
          this.onSignInSubmit();
          // console.log("Recaptca varified")
        },
        //  defaultCountry: "IN"
       }
      );
    }
    onSignInSubmit = (e) =&gt; {
      e.preventDefault()
      this.configureCaptcha()
      const phoneNumber =  this.state.mobile
      const appVerifier = window.recaptchaVerifier;
      const dbRef = ref(getDatabase());
      get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) =&gt; {
        if (snapshot.exists()){
          firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
     
          .then((confirmationResult) =&gt; {
  
            // SMS sent. Prompt user to type the code from the message, then sign the
            // user in with confirmationResult.confirm(code).
             
            window.confirmationResult = confirmationResult;
          
            alert('An OTP has been sent to your registered mobile number')
            localStorage.setItem("Phone_No", phoneNumber ) 
            console.log(localStorage.getItem('Phone_No'));
  
          
          }).catch((error) =&gt; {
            
            console.error(error);
            alert("Oops! Some error occured. Please try again.")
          });
        }
        else{
          alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
        }
        
    }) 
    }
    onSubmitOTP = (e) =&gt;{
      e.preventDefault()
      const code = this.state.otp
      console.log(code)
      window.confirmationResult.confirm(code).then((result) =&gt; {
        // User signed in successfully.
        const Users = result.user;
        console.log(JSON.stringify(Users)) 
        this.props.history.push("/home");
      }).catch((error) =&gt; {
        alert("You have entered wrong code")
       });
    }
  
    render() {
      return (
        &lt;div className="Main-header"&gt;
        &lt;img src="./55k-logo.png" alt="Company Logo" style={{height: "80px", width: "200px"}} /&gt;
        &lt;br/&gt;
        &lt;div&gt;
          &lt;h2&gt;Login Form&lt;/h2&gt;
          &lt;p&gt;Limtless Water. From Unlimited Air.&lt;/p&gt;
          &lt;form onSubmit={this.onSignInSubmit}&gt;
            &lt;div id="sign-in-button"&gt;&lt;/div&gt;
            {/* &lt;PhoneInput */}
  
            &lt;label&gt;Mobile Number&lt;/label&gt; &lt;br/&gt;
            {/* for="phoneNumber"  */}
         
            &lt;input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange}/&gt;
            &lt;div className="buttons"&gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
          &lt;form onSubmit={this.onSubmitOTP}&gt;
          &lt;label &gt;Code&lt;/label&gt; &lt;br/&gt;  
          {/* for="code" */}
          
            &lt;input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this.handleChange}/&gt;
            &lt;div className="buttons" &gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  export default Login;</code></pre>
  </div>
  </div>
  </p>