Reactively display data when selecting a value from lightning-combobox

Question

SF newbie here. I have a lightning-combobox component with a bunch of leads. When a user clicks on a particular lead, I want data related to that lead (Name, Company, Email) to be displayed. I'm hoping to achieve this by filtering the avaialble options by the Lead ID which is passed into my onchange handler function but this doesn't seem to work as I had hoped.

I'm expecting the following to be populated but it's just empty.

  <p if:true={value}>Name: {selectedLead.Name}</p>
  <p if:true={value}>Company: {selectedLead.Company}</p>
  <p if:true={value}>Email: {selectedLead.Email}</p>

I tested my filter function in the browser's dev console and it works fine... Can someone give some pointers as to what I'm doing wrong?

Code:

LWC

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';

export default class LeadDropdownComponent extends LightningElement {
  // tried adding the @track decorator for the following variables but issue still remains
  leadOptions;
  selectedLead;
  value;
  @wire(getLeads)
  leads({ error, data }) {
    if (data) {
      console.log(data)
      try {
        this.leadOptions = data.map(d => {
          return { label: d.Name, value: d.Id };
        });
      } catch (error) {
        console.error(error);
      }
    } else if (error) {
      console.error(error);
    }
  }

  handleChange(event) {
    this.value = event.detail.value;
    this.selectedLead = this.leadOptions.filter(lead => lead.Id === event.detail.value)[0];
  }
}

HTML

<template>
  <lightning-card title="Lead" icon-name="standard:people">
  <lightning-combobox
    name="lead"
    label="Lead"
    value={value}
    options={leadOptions}
    placeholder="Select Lead"
    onchange={handleChange}
  ></lightning-combobox>
  <p if:true={selectedLead}>Name: {selectedLead.Name}</p>
  <p if:true={selectedLead}>Company: {selectedLead.Company}</p>
  <p if:true={selectedLead}>Email: {selectedLead.Email}</p>
</lightning-card>
</template>

Controller

public with sharing class LeadController {
    @AuraEnabled(cacheable=true)
    public static List<Lead> getLeads() {
        try {
            return [SELECT Id, Name, Company, Email FROM Lead WITH SECURITY_ENFORCED];
        } catch (QueryException error) {
            System.debug(error);
            return null;
        }
    }
}

Answer 1

You need another variable to store whole data as your lead option only contain id. So I created leadData variable and assign value and using that.

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';

export default class LeadDropdownComponent extends LightningElement {
  // tried adding the @track decorator for the following variables but issue still remains
  leadOptions;
  @track leadData;
  selectedLead;
  value;
  @wire(getLeads)
  leads({ error, data }) {
    if (data) {
      console.log(data)
      try {
        this.leadData = data;
        this.leadOptions = data.map(d => {
          return { label: d.Name, value: d.Id };
        });
      } catch (error) {
        console.error(error);
      }
    } else if (error) {
      console.error(error);
    }
  }

  handleChange(event) {
    this.value = event.detail.value;
    this.selectedLead = this.leadData.filter(lead => lead.Id === event.detail.value)[0];
  }
}

Answer 2

You're assigning one of the leadOptions to the selectedLead variable, but your lead options are an array of objects that just have a label/value. (in your case, the leads name and the leads id)

I'm guessing if you outputted {selectedLead.label} and {selectedLead.value}, you'd see something.

You need to store the output of your wire method in its own variable so you can get the actual lead record and assign it to selectedLead.

e.g.

_leads;

@wire(getLeads)
leads({ error, data }) {
  this._leads = { error, data};

  // your additional processing....

}

and then your handleChange method could be:

handleChange(event) {
  this.value = event.detail.value;
  this.selectedLead = this._leads.data.filter(lead => lead.Id === event.detail.value)[0];
}