How to integrate react-intl-tel-input

Question

Hello I am new in ReactJS and I have to implement react-intl-tel-input for taking phone number from all over the world but while integration I was facing some issues. When I write this code:

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
  name="mobile"
  placeholder="Enter Your Number" 
  input
  type="tel"
  value={this.state.phoneNumber}
  onChange={this.handleChange}

I was not able to access this.handleChange but When I write my normal code like this

<input
  type="tel"
  id="phone"
  name="mobile"
  placeholder="Enter Your Number"
  required
  onChange={this.handleChange}
/>

I was able to access this.handleChange and my code work perfectly but I was unable to take country code. If anyone know the solution please help. I was getting this error

TypeError: Cannot read properties of null (reading 'phoneNumber')

This is my complete code.

---

Login.js

import React from 'react'
import firebase from './firebase'
import 'firebase/auth';
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';


class Login extends React.Component {

  handleChange = (e) => {
    console.log (e)
    const { name, value } = e.target
    this.setState({
      [name]: value
     
    })
    console.log (value)
    this.setState({ phoneNumber: value }, () => {
      console.log(this.state.phoneNumber);
    });
  }
  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 = this.state.mobile
    console.log(phoneNumber)
    const appVerifier = window.recaptchaVerifier;
    const dbRef = ref(getDatabase());
    get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
      if (snapshot.exists()) {
        firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)

          .then((confirmationResult) => {

            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) => {

            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) => {
    e.preventDefault()
    const code = this.state.otp
    console.log(code)
    window.confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const Users = result.user;
      console.log(JSON.stringify(Users))
      this.props.history.push("/home");
    }).catch((error) => {
      alert("You have entered wrong code")
    });
  }

  render() {
    return (
      <div className="Main-header">
        <img src="./55k-logo.png" alt="Company Logo" style={{ height: "80px", width: "200px" }} />
        <br />
        <div>
          <h2>Login Form</h2>
          <p>Limtless Water. From Unlimited Air.</p>
          <form onSubmit={this.onSignInSubmit}>
            <div id="sign-in-button"></div>
            {/* <PhoneInput */}

            <label>Mobile Number</label> <br />
            {/* for="phoneNumber"  */}
            <IntlTelInput
              containerClassName="intl-tel-input"
  inputClassName="form-control"
     name="mobile" placeholder="Enter Your Number" 
    input type="tel" value={this.state.phoneNumber}
       onChange={this.handleChange}
    
      />
            {/* <input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} /> */}
            <div className="buttons">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>

        <div>
          <form onSubmit={this.onSubmitOTP}>
            <label >Code</label> <br />
            {/* for="code" */}

            <input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this.handleChange} />
            <div className="buttons" >
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}
export default Login;

Answer 1

Issues

• There is no defined initial state so this is why accessing this.state.phoneNumber is throwing an error.
• The IntlTelInput component takes an onPhoneNumberChange handler that takes a validation status, current value, and country details as arguments instead of an onChange handler taking an onChange event object.

Solution

Provide valid initial state for the component. In React class components state is simply a class property, it just needs to be defined.

state = {};

Create a new change handler specifically for the IntlTelInput component.

handlePhoneChange = (status, phoneNumber, country) => {
  this.setState({ phoneNumber });
};

Switch from onChange to onPhoneNumberChange event handler.

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
  name="mobile"
  placeholder="Enter Your Number"
  input
  type="tel"
  value={this.state.phoneNumber}
  onPhoneNumberChange={this.handlePhoneChange}
/>