LightningModal extract first Element from Array to use in String

Question

On my Parent Lightning Element I have a data table where on Row Selection I want to open a custom Record Page in a Lightning Modal. I am struggling to extract the Id I am passing in the options array. I have placed the array in the Modal HTML to confirm it is outputting correctly. However when I use the following code to return the first element in the array I receive an Error (at bottom)

werRecordId = this.options[0];

Parent JS

handleRowSelection(event) {
        this.werSelectedRowId = event.detail.selectedRows[0].Id;
        MyModal.open({
        options: [
            this.werSelectedRowId,
        ]
        }).then((result) => {
            console.log(result);
        });
    }

Modal JS

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
  @api options;
 
  werRecordId = this.options[0];
  //werRecordId = 'a08030000014jjaAAA';

  handleOptionClick(e) {
    const { target } = e;
    const { id } = target.dataset;
    this.close(id);
  }
}

Modal HTML

<template>
 <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
 <lightning-modal-body>
  {options}
  <c-work-experience-record-page 
   record-id={werRecordId} 
   ondisablerowselect={hanldeDisableRowSelect}
   onenablerowselect={hanldeEnableRowSelect}
  ></c-work-experience-record-page>
 </lightning-modal-body>

 <lightning-modal-footer>
  <lightning-button label="OK" onclick={handleOkay}></lightning-button>
 </lightning-modal-footer>
</template>

Error

[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:1000:112
{anonymous}()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:1000:305
dispatchEvent()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:13:46387
Na.dispatchEvent()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:13:13839
Na.fireSelectedRowsChange()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:95086
Na.zn()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:49259
Na.handleSelectionCellClick()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:93785

sfdcfox · Accepted Answer · 2022-11-05 06:37:10Z

You can't use @api properties before the constructor has finished, because those properties haven't been initialized yet. Further, your code would be unresponsive to any changes made to the object later. Arguably, the easiest solution is to use a getter:

get werRecordId() {
  return this.options[0];
}

Getters are called later in the life cycle, and so can access @api properties correctly. You can also use the connectedCallback lifecycle hook:

connectedCallback() {
  this.werRecordId = this.options[0];
}

As @api properties are set before this method is called. However, if the loading of that data is asynchronous, this may fail.

You can also use an @api get/set configuration:

werRecordId;
#options; // private variable
@api set options(value) {
  this.#options = value;
  this.werRecordId = value && value[0];
}
// Note: Decorate get or set, not both
get options() {
  return this.#options;
}

Stack Exchange Network

LightningModal extract first Element from Array to use in String

1 Answer 1

You must log in to answer this question.

Hot Network Questions

LightningModal extract first Element from Array to use in String

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions