Added country dropdown on contact page

src/component/Contact/Main.js

@@ -1,11 +1,25 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Bredcrumb from "../Bredcrumb/Main";
 import BGImg from "../../assets/images/bread_crumb_bg.png";
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png";
 import BGImg2 from "../../assets/images/bread_crumb_bg_two.png";
 
+import SiteService from "../../vendors/service/siteService";
+
 const Main = ({ brdcum }) => {
+  let [countries, setCountries] = useState([]) // initial state for country dropdown
+  let countryClass = new SiteService() // instantiating the class
+  
+  const allCountry = () => {
+    return countryClass.countryData();
+  }
+
+  //CALLS THE API AFTER COMPONENT LOADS
+  useEffect(()=>{
+    allCountry().then((data)=> setCountries(Object.values(data.data)))
+  },[])
+
   return (
     <>
       {brdcum.b1 && (
@@ -86,6 +100,7 @@ const Main = ({ brdcum }) => {
                 <div className="form-group">
                   <select className="form-control">
                     <option value="">Country</option>
+                    {countries.length > 0 && countries.map((country, index) => <option key={index} value={country}>{country}</option>)}
                   </select>
                 </div>
                 <div className="form-group">