Hello I have started learning ReactJS from past 1 months and from last 1 week i stuck with a problem. I am using React with Firebase Phone Authentication. I want to use react-intl-tel-input for taking Phone input but when i install the package and write the code while writing i don't understand how to use the code in right way and getting this type of error × TypeError: Cannot read properties of null (reading 'phoneNumber')
. or some times its give me this error × TypeError: Cannot read properties of null (reading 'e')
I don't want that user have to type there country code manually with phone Number I want that user can simply select there country and type there phone number
can Any one Please Help me i stuck in this from more than 1 week tried different npm packages also try to use jQuery but nothing work for me.
this is my code ( App.js )
import React from 'react' import firebase from './firebase' import IntlTelInput from 'react-intl-tel-input'; import 'react-intl-tel-input/dist/main.css'; class App extends React.Component { handleChange = (e) =>{ const {name, value } = e.target this.setState({ [name]: value }) } configureCaptcha = () =>{ window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', { 'size': 'invisible', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. this.onSignInSubmit(); console.log("Recaptca varified") }, defaultCountry: "IN" }); } onSignInSubmit = (e) => { e.preventDefault() this.configureCaptcha() const phoneNumber = "+91" + this.state.mobile console.log(phoneNumber) const appVerifier = window.recaptchaVerifier; firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier).then((confirmationResult) => { // SMS sent. Prompt user to type the code from the message, then sign the // user in with confirmationResult.confirm(code). window.confirmationResult = confirmationResult; console.log("OTP has been sent") alert("OTP has been sent") }).catch((error) => { // Error; SMS not sent //... console.log("SMS not sent") alert("SMS not sent") }); } onSubmitOTP = (e) =>{ e.preventDefault() const code = this.state.otp console.log(code) window.confirmationResult.confirm(code).then((result) => { // User signed in successfully. const user = result.user; console.log(JSON.stringify(user)) alert("User is verified") //... }).catch((error) => { // User couldn't sign in (bad verification code?) //... }); } render() { return ( <div> <h2>Login Form</h2> <form onSubmit={this.onSignInSubmit}> <div id="sign-in-button"></div> <IntlTelInput containerClassName="intl-tel-input" inputClassName="form-control" placeholder="Enter Your Number" value={this.state.phoneNumber} onPhoneNumberChange={this.handlePhoneChange} /> {/* <input type="number" name="mobile" placeholder="Mobile number" required onChange={this.handleChange}/> */} <button type="submit">Submit</button> </form> <h2>Enter OTP</h2> <form onSubmit={this.onSubmitOTP}> <input type="number" name="otp" placeholder="OTP Number" required onChange={this.handleChange}/> <button type="submit">Submit</button> </form> </div> ) } } export default App
This library does not return a component, am pasting my component.
phoneInput.js
import React, { useEffect, useState } from 'react';
import intlTelInput from 'intl-tel-input';
import clsx from 'clsx';
import 'intl-tel-input/build/css/intlTelInput.css';
export const PhoneInput=({disabled,...rest})=>{
//rest may include-name, onChange, etc
const [options,toggleOptions]=useState({
allowDropdown:true,
autoHideDialCode:false,
initialCountry: "auto",
separateDialCode:true,
nationalMode:false,
hadInitialPlaceholder:true,
utilsScript: process.env.REACT_APP_PHONE_UTIL_SCRIPT,
geoIpLookup: async function(callback) {
await fetch(process.env.REACT_APP_GEOIP_SERVICE)
.then(res=>res.json())
.then(({country})=>{
callback(country)
})},
customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
return "e.g. " + selectedCountryPlaceholder;
},
})
useEffect(()=>{
const input = document.querySelector("#signup-phone");
if(!input) return;
const iti=intlTelInput(input, {
...options
});
return()=>{
iti.destroy();
}
},[])
useEffect(()=>{
toggleOptions(o=>({
...o,
allowDropdown:!disabled
//disable dropdown when disable flag is set
}));
},[disabled])
return(
<input
disabled={disabled}
type="tel"
id="signup-phone"
{...rest}
/>
)
}
Utilised in signup.js
<PhoneInput
name="phone_no"
onChange={handleChange}
disabled={loading}
error={errors['phone_no']}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.