I am writing a component that allows the user to designate the API names of the fields they want to see in a related list. I am trying to pass these API field names into the "fields" parameter of a lightning record component, but I am getting the following error. If I hard code the field names in, everything works fine. It seems that in JavaScript I need to do something to convert the @api values to a string, even though it seems to be working just fine as a string when I am successfully passing it to my aura enabled Apex class.

Basically it will not accept ```const fields``` in my JS.

Error: "[Cannot read property 'fieldApiName' of undefined]"

It seems to me that all values are defined by @api, but I must be missing something. What am I missing?

Many thanks




    <template>  
          
        <lightning-card title={strTitle} icon-name="standard:record">
    
            <lightning-button class="slds-m-around_medium" label="New" onclick={navigateToNew}></lightning-button>
    
            <div class="slds-m-around_medium">  
      
                <div if:true={records.data}>  
      
                    <template for:each={records.data} for:item="rec">    
      
                        <div key={rec.Id} class="slds-box">  
      
                            <lightning-record-form
                                record-id={rec.Id}   
                                object-api-name={objectName}   
                                fields={fields}    
                                mode="view"  
                                columns="3">                                                
                            </lightning-record-form>
      
                        </div>  
                          
                    </template>  
      
                </div>  
      
            </div>  
      
        </lightning-card>  
          
    </template>

JS

    import { LightningElement, api, wire } from 'lwc';  
    import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';
    import { NavigationMixin } from 'lightning/navigation';
      
    export default class RelatedList extends NavigationMixin(LightningElement) {   
      
        @api objectName;   
        @api parentFieldAPIName;  
        @api recordId;  
        @api strTitle;
        @api fieldName1;
        @api fieldName2;
        @api fieldName3;
        @api fieldName4;
        @api fieldName5;
        @api fieldName6;  
    
        @track vals;

     connectedCallback() {
        const fields = [];
        
        if (this.fieldName1) {
            fields.push(this.fieldName1);
        }
        if (this.fieldName2) {
            fields.push(this.fieldName2);
        }
        if (this.fieldName3) {
            fields.push(this.fieldName3);
        }       
        
        if (fields.length) {
            this.vals = this.recordId + ',' + this.objectName + ',' +   
               this.parentFieldAPIName + ',' + this.fieldName1 + ',' +
               this.fieldName2 + ',' + this.fieldName3;
        }
     }
          
        @wire(fetchRecords, {listValues: '$vals'})  
        records;
    
        navigateToNew() {
            this[NavigationMixin.Navigate]({
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'POC_Use_Case__c',
                    actionName: 'new'
                }        
            });
        }
    }

Meta

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RelatedList">
        <apiVersion>45.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__RecordPage</target>
        </targets>
        <targetConfigs>
            <targetConfig targets="lightning__RecordPage">
                <property name="strTitle" type="String" label="Title" description="Enter the title"/>
                <property name="objectName" type="String" label="Object Name" description="Enter the object API name"/>
                <property name="parentFieldAPIName" type="String" label="Parent Field API Name" description="Enter the parent field API Name"/>
                <property name="fieldName1" type="String" label="Field 1 API Name" description="Enter the field API name"/>
                <property name="fieldName2" type="String" label="Field 2 API Name" description="Enter the field API name"/>
                <property name="fieldName3" type="String" label="Field 3 API Name" description="Enter the field API name"/>
                <property name="fieldName4" type="String" label="Field 4 API Name" description="Enter the field API name"/>
                <property name="fieldName5" type="String" label="Field 5 API Name" description="Enter the field API name"/>
                <property name="fieldName6" type="String" label="Field 6 API Name" description="Enter the field API name"/>
            
            </targetConfig>
        </targetConfigs>
    </LightningComponentBundle>


Apex

    public class RelatedListController {  
      
        @AuraEnabled(cacheable=true)  
        public static List <sObject> fetchRecords(String listValues){      
            
            List <String> strList = listValues.split(',');  
            system.debug('values are ' + strList);  
              
            if (strList.size() == 6) {  
              
                String recordId = strList.get(0);  
                String objectName = strList.get(1);  
                String parentFieldAPIName = strList.get(2);  
                String fieldName1 = strList.get(3);  
                String fieldName2 = strList.get(4);
                String fieldName3 = strList.get(5);
                  
                String strSOQL = 'SELECT Id, '+fieldName1+', '+fieldName2+', '+fieldName3+
                                 ' FROM '+objectName+' WHERE '+parentFieldAPIName+' = \''+recordId+'\' ';
                
                system.debug('-------->strSOQL = '+strSOQL);                        
                
                return Database.query(strSOQL);  
                  
            } else   
                return null;            
        }          
    }