Add only 2 flags in the library react-phone-number-validation-CodePudding

I'm trying to only add 2 flags for the phone input. Currently I'm using the library react-phone-number-validation.

Here is a codesandbox that I found:

https://codesandbox.io/s/react-phone-number-validation-forked-kr6075?file=/src/App.js

By putting the defaultCountry="AR" on the component I'm able to start with the AR flag by default.

For what I read I can use the countries="AR".

Example:

If specified, only these countries will be available for selection.

["RU", "UA", "KZ"]

When I try to use this, the console log shows 'countries.filter is not a function'

I tried importing

import { getCountries, isSupportedCountry } from "react-phone-number-input";

but it's still logging the same error.

Here is the documentation if anyone needs it:

https://catamphetamine.gitlab.io/react-phone-number-input/docs/#phoneinputwithcountry

CodePudding user response：

This worked just fine. You can view it in this codesandbox https://codesandbox.io/s/react-phone-number-validation-forked-nyex6m?file=/src/App.js:0-567

import React, { useState } from "react";
import PhoneInput, { isValidPhoneNumber } from "react-phone-number-input";
import "react-phone-number-input/style.css";

function App() {
  const [value, setValue] = useState();

  if (value && isValidPhoneNumber(value.toString())) {
    console.log("Phone Number Valid");
  } else {
    console.log("Invalid");
  }

  return (
    <PhoneInput
      defaultCountry="AR"
      countries={["AR", "UA", "KZ"]}
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
    />
  );
}

export default App;