Pass data from one LWC to another

Question

Context:

I'm fairly new to Salesforce development so I decided to make a pet project in which the client can create users by clicking 'Create Account' button near the empty users data table. Inside a modal window there are 2 input fields 'Name' and 'Type'. When the user enters the data they need to press the 'Save' button and the entered data should transfer inside the data table.

The problem is that I cannot properly understand how exactly should I transfer the text from these 2 input fields inside a separate LWC, the @api decorator doesn't seem to work, so I'm quite confused.

For the modal I'm using Lightning Modal.

modalPopup.js

// import { api } from 'lwc';

import LightningModal from "lightning/modal";

export default class ModalPopup extends LightningModal {
  accountName;
  accountType;

  handleClose() {
    this.close();
  }
}

modalPopup.html

<template>
 <lightning-modal-header label="Create Account"></lightning-modal-header>
 <lightning-modal-body>
   <lightning-input onchange="{handleChange}" label="Name" value="{accountName}">
   </lightning-input>
   <h1>Name: {accountName}</h1>
   <lightning-input onchange="{handleChange}" label="Type" value="{accountType}">
   </lightning-input>
   <h1>Type: {accountType}</h1>
 </lightning-modal-body>
 <lightning-modal-footer>
   <lightning-button label="Save" onclick="{handleSave}"></lightning-button>
   <lightning-button label="Cancel" onclick="{handleClose}"></lightning-button>
 </lightning-modal-footer>
</template>

And here's how the accounts table looks like where I need to pass the data to

accountsTable.js

import { LightningElement, api } from "lwc";
import ModalPopup from "c/modalPopup";
import generateData from "./generateData";

// import Type from '@salesforce/schema/Account.Type';

// Create the column names

const columns = [
  { label: "Name", fieldName: "name" },
  { label: "Type", fieldName: "type", type: "text" },
  { label: "Owner", fieldName: "owner", type: "text" },
  { label: "Created Date", fieldName: "createdDate", type: "date" },
];

export default class AccountTable extends LightningElement {
  @api accounts = [];

  connectedCallback() {
    const accounts = generateData();
    this.accounts = accounts;
  }

  handleAccountData(event) {
    const { name, type } = event.detail;
    this.accounts.push({ Name: name, Type: type });
  }

  // Open a modal window
  async handleClick() {
    const result = await ModalPopup.open({
      size: "large",
      description: "Test Desc",
    });
    console.log(result);
  }

  columns = columns;
  accounts = [];
}

accountsTable.html

<template>
  <div style="height: 300px">
    <lightning-datatable key-field="id" data="{accounts}" columns="{columns}">
    </lightning-datatable>
  </div>

  <div>
    <lightning-button
      label="Create Account"
      aria-haspopup="dialog"
      onclick="{handleClick}"
    ></lightning-button>
  </div>

  <div>Accounts Array: {accounts}</div>
</template>

Answer 1

Looks like you need two pieces: On the Modal, you need a change handler that is invoked by handleChange on the inputs e.g.

  handleChange (event) {
      const newValue = event.target.value;
      const fieldName = event.target.name;
        if (fieldName === 'Name') {
          this.accountName = newValue ;
        }
        else if (fieldName === 'Type') {
           this.accountType= newValue ;
        }
     }

(there are cleaner ways of capturing that data change but as a simple example this will suffice)

And then in the handleSave method, you pass back the result to the original LWC by putting in the close method e.g.

let eventdetail = {name: this.accountName, type: this.accountType}
this.close(eventdetail);

You should then see the data in the console(result) you already have in the async method, so you can then use that result payload to add data to the table as you need to