Display an Account name in lwc using getRecord

Question

I have a custom lwc component createContactWithApex which calls another component

 <c-child object-name="Contact" field-name="Name"
        label="Contact" parentidfield="ContactId"
        iconname="standard:contact">
 </c-child>

In the child.html - the childs's components' html file, I have the following code

 <template if:true={selectedRecord}>
      <input class="slds-input slds-combobox__input
                           slds-combobox__input-value" 
                           id="combobox-id-5" aria-controls="listbox-id-5" 
                           autocomplete="off" role="textbox" type="text" 
                           placeholder="Select an Option" readonly=""
                           value={selectedRecord.Name}
                           disabled
                           />
  <template if:true={selectedRecord}>

In the child.js - the childs's components' js file, I have the following code

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
'Account.Id',
'Account.Name',
];

@api objectName = 'Account';
@api fieldName  = 'Name';
@api iconname   = 'standard:record';
@api label      = 'Account';
@api parentidfield = 'AccountId';

@wire(getRecord, { recordId: '0016F00002cy7eXQAQ', fields: FIELDS })
selectedRecord;

Here 0016F00002cy7eXQAQ is a valid AccountId

My expectation here is for the getRecord method to fetch the correct Account record using the recordId and fields and display it on the Child component on component load.

However, instead of the name of the Account getting printed, on child.html , it is coming as undefined in the UI.

I am not exactly sure if I am making any mistake in the wire method format.

Answer 1

You need to see the structure of the data recordApi is returning. If you'd look the data is actually inside fields property. You can access it like,

@track selectedRecord = { Id: { value: null }, Name: { value: null } };
  @wire(getRecord, { recordId: "0016F00002cy7eXQAQ", fields: FIELDS })
  selectedRecord;
  wiredAccount({ error, data }) {
    if (data) {
        this.selectedRecord = data.fields;
      }
    } else {
        this.error = error;
    }
  }

You can then access it like,

 <template>
    {selectedRecord.Name.value}
</template>