Here is my code. If you notice I am trying to select CountryID=1 in the dropdown but for some reason that is not getting selected -
import React, { useState, useEffect } from 'react';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { useMsal } from "@azure/msal-react";
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
const Home = () => {
const [loaded, setLoaded] = useState(false);
const { instance } = useMsal();
const [token, setToken] = useState(null);
useEffect(() => {
const account = instance.getActiveAccount();
const accessTokenRequest = {
scopes: ["api://0fcfc1ec-9df8-4f8e-b8e6-4a1ca3674696/AccessAPI", "User.Read", "Group.Read.All"],
account: account
};
if (!token) {
instance.acquireTokenSilent(accessTokenRequest).then(function (accessTokenResponse) {
setToken(accessTokenResponse.accessToken);
})
.catch(function (error) {
if (error.name === "InteractionRequiredAuthError") {
instance.acquireTokenPopup(accessTokenRequest)
.then(function (accessTokenResponse) {
setToken(accessTokenResponse.accessToken);
}).catch(function (error) {
console.log(error);
});
}
});
}
});
var stateProvinceNameFromApi;
var countryFromApi;
if (token !== null && token !== "") {
stateProvinceNameFromApi = new DataManager({
url: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,
adaptor: new ODataV4Adaptor(),
crossDomain: true,
headers: [{ Authorization: `Bearer ${token}` }],
});
countryFromApi = new DataManager({
url: `https://courtconnectapi.azurewebsites.net/odata/Country?$select=Id,CountryName`,
adaptor: new ODataV4Adaptor(),
crossDomain: true,
offline: true,
headers: [{ Authorization: `Bearer ${token}` }],
});
}
const countryId = 1;
return (
<div>
<DropDownListComponent id="CountryId" value={countryId} dataSource={countryFromApi} fields={{ text: 'CountryName', value: 'Id' }} placeholder="Select Country" popHeight='300px' floatLabelType='Always'></DropDownListComponent>
</div>
);
}
export default Home;
