I have this code that must call a child component based on the profile of the user. If 'isProfileA' attribute is true, it must call 'componentA', otherwise call 'componentB'. In my case, 'isProfileA' is true however it calls 'componentB' first and then 'componentA'. The goal is just to call 'componentA'. I don't know why it still enters the else statement. The value of 'isProfileA' is set to true on init. I have also debugged the Apex and JS and its value is true. Does anyone have an idea what could be the problem?

This is the cmp.

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="isProfileA" type="Boolean" default="false"/>


<aura:if isTrue="{!v.isProfileA}">
    <c:ComponentA/>
    <aura:set attribute="else">
        <c:ComponentB/>
    </aura:set>
</aura:if>  

This is the controller.js.

({
doInit : function(component, event, helper) {
    let action = component.get('c.checkIfProfileA');
    action.setCallback(this, function(response){
       let state = response.getState();
        if(state == "SUCCESS") {
            let returnValue = response.getReturnValue();
            component.set('v.isProfileA', returnValue);
        }
    });
    $A.enqueueAction(action);
}

})

I have this code that must call a child component based on the profile of the user. If 'isProfileA' attribute is true, it must call 'componentA', otherwise call 'componentB'. In my case, 'isProfileA' is true however it calls 'componentB' first and then 'componentA'. The goal is just to call 'componentA'. I don't know why it still enters the else statement. The value of 'isProfileA' is set to true on init. I have also debugged the Apex and JS and its value is true. Does anyone have an idea what could be the problem?

This is the cmp.

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="isProfileA" type="Boolean" default="false"/>


<aura:if isTrue="{!v.isProfileA}">
    <c:ComponentA/>
    <aura:set attribute="else">
        <c:ComponentB/>
    </aura:set>
</aura:if>  

This is the controller.js.

({
    doInit : function(component, event, helper) {
        let action = component.get('c.checkIfProfileA');
        action.setCallback(this, function(response){
           let state = response.getState();
            if(state == "SUCCESS") {
                let returnValue = response.getReturnValue();
                component.set('v.isProfileA', returnValue);
            }
        });
        $A.enqueueAction(action);
    }
})