Return to Question

The Component Error I get is: Cannot read properties of null (reading 'style').

The error I get is: "Uncaught Action failed: c:DataObjectDetail$controller$openModal [Cannot read properties of undefined (reading 'find')]."

    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';
    },

({
    doInit : function(component, event, helper) {
        var pathname = window.location.pathname;
        var pathArray = pathname.split("/");
        var sfObject = "";
        var isLightningApp = true;
        if (pathArray[1] == 'lightning') {
            sfObject = pathArray[3];
            isLightningApp = false;
        }
        
        if (isLightningApp) {
            var dataObjectId = component.get("v.dataObjectId");
            var action = component.get("c.getDataFields");       
            action.setParams({ recordId : dataObjectId });
            action.setCallback(this, function(data){
                component.set("v.dataFields",data.getReturnValue());
            });
        } else {
            var action = component.get("c.getDataFieldsByObjectName");
            action.setParams({ name : sfObject });
            action.setCallback(this, function(data) {
                component.set("v.dataFields",data.getReturnValue());
            });
        }
        $A.enqueueAction(action);

    },
    
    
    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';
    },
    
   closeModel: function(component, event, helper) {
       // Set isModalOpen attribute to false
       console.log('closeModal');
       component.set("v.isModalOpen", false);
   },


})

<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.openModel }" data-dataFieldId="{!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>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <aura:iteration items="{!v.dataFields}" var="item">
                            <div id="{!'dataFieldDetail-' + 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>

    openModel: function(component, event, helper) {
        component.set("v.isModalOpen", true);
        var ctarget = event.target;
        var id_str = ctarget.getAttribute('data-dataFieldId');
        var modalobj = document.getElementById("data-fieldDetail" + id_str);
        modalobj.style.display = "block";
    },
 

<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>

    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';
    },