lightning-record-edit-form record id not binding

Question

I have a record edit form on which I'm binding my record id. When I pass record ID as hardcoded form then the lightning record edit form gets loaded but when I'm passing that ID dynamically record edit form does not load.Below is the code :

.HTML

<template if:false={viewForm}>
        <lightning-record-edit-form record-id={closeoutId} object-api-name="Contract_Close_Out__c">
          
            <lightning-output-field field-name="Contract_Type__c">
            </lightning-output-field>
            <lightning-input-field field-name="Anticipated_Close_out_date__c">
            </lightning-input-field>
            <lightning-input-field field-name="Evidence_of_physical_completion__c">
            </lightning-input-field>
            <lightning-input-field field-name="Contractual_Warranty__c">
            </lightning-input-field>
            <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update">
            </lightning-button>
        </lightning-record-edit-form>
    </template>

.JS

onEditHandler(){
   
    getCloseOutId({
        id : this.recordId
    }).then(result => {
        this.closeoutId = 'a0z1G00000BOVxvQAH'; //Record edit form gets loaded
        this.closeoutId =  result.map((item) => (item.Id)); //Record edit form does not get loaded,although in console I can see the ID printed.
        console.log('this.closeoutId : '+this.closeoutId);
        this.viewForm = false;
})
}

Answer 1

Could it be that the array is passed instead of the id parameter to the form?

The reason why you didn't recognize that it's an array

let ids = ['someidsdfsdfsdf'];
console.log('ids => ' + ids); // Output: ids => someidsdfsdfsdf
console.log('ids => ', ids);  // Output: ids =>  ["someidsdfsdfsdf"]

To avoid this you can either use , instead of + in the log as in the second console log.

Answer 2

Before calling the getCloseOut() method, a spinner should be displayed and when result is returned then closeoutId should be populated only once and then mark viewForm as False.

Following is snippet with change

onEditHandler(){
  this.viewForm = true; //Display a spinner here
getCloseOutId({
    id : this.recordId
}).then(result => {
    this.closeoutId =  result.map((item) => (item.Id)); //Record edit form does not get loaded,although in console I can see the ID printed.
    console.log('this.closeoutId : '+this.closeoutId);
    this.viewForm = false;
})}

Because you are updating the closeoutId twice, the form is not rendering the changed value.