I have a lightning component that displays a modal when a button is clicked. Based on the ID stored in the dataset of the clicked element when the modal is loaded the action should look for a div that contains the ID and set it to display block. But I'm running into an issue where when I look for the div it should unhide it returns null. component: ``` <aura:component controller="DataDictionaryController" implements="flexipage:availableForAllPageTypes" access="global" > <aura:attribute name="dataFields" type="Data_Field__c[]" /> <aura:attribute name="dataObjectId" type="String" /> <aura:attribute name="isModalOpen" type="boolean" default="false"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th></th> <th>Label</th> <th>API Name</th> <th>Data Type</th> <th>Owner</th> <th>Description</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Label</th> <th>API Name</th> <th>Data Type</th> <th>Owner</th> <th>Description</th> </tr> </tfoot> <tbody> <aura:iteration items="{!v.dataFields}" var="item"> <tr> <td> <div onclick="{!c.openModal}" data-id="{!item.Id}" class="hello"> <lightning:button variant="brand" label="Info" title="Info" /> </div> </td> <td>{!item.Label__c}</td> <td>{!item.Name}</td> <td>{!item.Data_Type__c}</td> <td>{!item.Business_Owner_ID__c}</td> <td>{!item.Description__c}</td> </tr> </aura:iteration> </tbody> </table> </div> </div> <div class="slds-m-around_xx-large"> <aura:if isTrue="{!v.isModalOpen}"> <section id="dataFieldModal" role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Field Details</h2> </header> <!--Modal/Popup Box Body Starts here--> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> <aura:iteration items="{!v.dataFields}" var="item"> <div aura:id="modal" data-id="{!item.Id}" style="display: none" > <p> Info goes here...<br /> {!item.Id}<br /> {!item.Name} </p> </div> </aura:iteration> </div> <footer class="slds-modal__footer"> <lightning:button variant="neutral" label="Close" title="Close" onclick="{! c.closeModel }"/> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </aura:if> </div> </aura:component> ``` controller ``` openModal: function(component, event, helper) { let modals = component.find("modal"); let desiredModal = modals.find( (modal) => modal.getElement().dataset.id === event.target.dataset.id ); console.log(desiredModal); desiredModal.getElement().style.display = 'block'; }, ``` The Component Error I get is: Cannot read properties of null (reading 'style'). Any help would be much appreciated!!