Get the record Id from one LWC and use it in another LWC

Question

Everyone!

I'm currently practicing LWC.

I made an LWC1 that will create a new order (Order Object). And also created a different LWC2 to add product to the order created. Sadly, I can't add a new product since I'm not sure on how to get the record id (of the created id) of LWC1 and use it in LWC2. (If I'll combine the 2 LWCs, the LWC will actually run perfectly. I just wanted to try if it is possible to run the LWCs separately).

Please see below for the codes:

Please see below for the codes (partial only):

LWC1 (Create New Order):

handleSuccess(event) {
    this.orderCreated = true;
    if (this.orderCreated) {
        getRecordId()
        .then(result => {
            this.recordId = result;
        })
    }

    event = new ShowToastEvent({
        title: 'Success!',
        message: 'Order Created',
    });
    this.dispatchEvent(event);
}

LWC2 (Add Product):

addProduct(event) {
    this.getRecordId = event.detail;
    if (this.recordId == null || this.recordId == '') {
    alert('Please create a record first');

Answer 1

Events can only go up the hierarchy. In the most usual case, this means you'd have a third component to handle the interaction between the two.

Your existing new order component fires off another event:

this.dispatchEvent(new CustomEvent('success',{detail:this.recordId}));

---

Which is handled by the outer component:

<template>
  <c-new-order onsuccess={handleSuccess}></c-new-order>
  <c-order-products record-id={recordId}></c-order-products>
</template>

---

recordId;
handleSuccess(event) {
  this.recordId = event.detail.recordId;
}

---