How to render a section based on Lightning:inputfield change?

Question

I have a visualforce page in which I am calling the lightning component. Based on a field change, I want render the bottom section of the component. here, the status field is a picklist and I want to render a section when the value of that field is Rejected. How do I do that?

Component:

Top section :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global"  controller="Nigoemailcommunication">
 <aura:attribute name="recordId" type="Id" />
<aura:attribute name="docmanId" type="Id" />
<aura:attribute name="docList" type="Docman_Communication__c[]"/>

<lightning:notificationsLibrary aura:id="notificationsLibrary"/>
<lightning:workspaceAPI aura:id="workspace" />

<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:layoutItem>
        <lightning:icon iconName="standard:scan_card" alternativeText="docman"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">DocMan Edit</h1>
            <!--<h2 class="slds-text-heading"></h2>-->
        </div>
    </lightning:layoutItem>
</lightning:layout>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="container-fluid">    
    <div class="slds-m-left--xx-large"/>
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <tbody>          
            <lightning:recordEditForm aura:id="docmanform" recordId="{!v.docmanId}" objectApiName="DocMan__c"
                              onsubmit="{!c.handleOnSubmit}"
                              onsuccess="{!c.handleOnSuccess}"
                              >
                 <lightning:messages />
                    <tr>
                        <td><lightning:layoutitem ><lightning:outputField aura:id="Name" fieldName="Name"/></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:outputField  fieldName="Contact__c" ></lightning:outputField></td>

                    </tr>
                    <tr>
                        <td><lightning:layoutitem ><lightning:inputField aura:id="Ssn__c" fieldName="Ssn__c"/></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem ><lightning:inputField  fieldName="Type__c" /></lightning:layoutitem></td>
                    </tr>
                    <tr>
                        <td><lightning:layoutitem ><lightning:inputField fieldName="DocId__c" /></lightning:layoutitem></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem > <lightning:inputField  fieldName="Method__c"/></lightning:layoutitem></td>                                
                    </tr>
                    <tr>
                        <td><lightning:inputField fieldName="TraceId__c" /></td>
                        <div class="slds-m-left--xx-large"/>
                        <td><lightning:layoutitem ><lightning:inputField fieldName="Received_Date__c"/></lightning:layoutitem></td>                                                        
                    </tr>
                    <tr >
                        <td><lightning:layoutitem><lightning:inputField  fieldName="Status__c" aura:id="status" onchange="{!c.handlechange}" /></lightning:layoutitem></td>                                
                    </tr>

                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
                </lightning:recordEditForm>  
        </tbody>
    </table>
    <div class="slds-m-top--xx-large"/>

Based on the Status field on the above code, I want to render the bottom section, I would use but I do not know how can I access Status field's value.

Bottom section :

<!-- PAGE HEADER -->
            <lightning:layout class="slds-page-header slds-page-header--object-home">
                <lightning:layoutItem>
                    <lightning:icon iconName="standard:scan_card" alternativeText="primaryinfo"/>
                </lightning:layoutItem>
                <lightning:layoutItem padding="horizontal-small">
                    <div class="page-section page-header">
                        <h1 class="slds-text-heading--label">NIGO Email Communication</h1>
                        <h2 class="slds-text-heading--medium">Primary Information</h2>
                    </div>
                </lightning:layoutItem>
            </lightning:layout>

            <div class="slds-m-around--xx-large">
                <div class="slds-float_left slds-p-bottom_small">
                    <h1 class="slds-page-header__title">Add Row 
                        <lightning:buttonIcon iconName="utility:add"  size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddrowClick}"/>
                    </h1> 
                </div>
                <div class="container-fluid">        
                    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                        <tbody>     
                            <aura:iteration items="{!v.docList}" var="acc" indexVar="index">
                                <lightning:recordEditForm aura:id="docmancommunicationform" objectApiName="Docman_Communication__c" >                    
                                    <tr>
                                        <td> 
                                            {!index + 1}
                                        </td>
                                        <td>
                                            <lightning:inputField aura:id="select" fieldName="Select"/>
                                        </td>
                                        <td>
                                            <lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c" value="{!acc.PrimaryInformation__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Status__c" value="{!acc.Status__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Rejected_Type__c" value="{!acc.Rejected_Type__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField  fieldName="Rejected_Reason__c" value="{!acc.Rejected_Reason__c}"></lightning:inputField>
                                        </td>
                                        <td>
                                            <lightning:inputField fieldName="Dealine__c" value="{!acc.Dealine__c}"/>
                                        </td>
                                        <!--<c:LightningDependentPicklistCmp/>-->
                                        <td style="padding-top: 27px;padding-left: 48px;">
                                            <a onclick="{!c.removeRow}" data-record="{!index}">
                                                <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                                                <span class="slds-assistive-text">Delete</span>
                                            </a>
                                        </td>
                                    </tr>
                                </lightning:recordEditForm>
                            </aura:iteration>


                        </tbody>
                    </table>
                    <div class="slds-m-top--xx-large"/>
                    <button class="slds-button slds-button_brand" onclick="{!c.Save}">Save</button>

                </div>
            </div>

    </div>
    <lightning:navigation aura:id="navService"/>
</aura:component>

Answer 1

just put the bottom section in div, and then based on selected value of status field you can toggle the div section like below

<lightning:layoutitem><lightning:inputField  fieldName="Status__c" aura:id="status" onchange="{!c.statusChange}" /></lightning:layoutitem>
<div aura:id="bottomsection" class="slds-hide"> 
 //bottom section content
</div>

controller.js

statusChange : function(c,e,h){    
if(e.getSource().get("v.value")=== 'Rejected'){
    $A.util.removeClass(c.find("bottomsection"), 'slds-hide');
}else{
 $A.util.addClass(c.find("bottomsection"), 'slds-hide');
}
}