LWC Custom Path: How to Conditionally Exclude Stages?

Question

I have a custom LWC component that builds a Path to display the full picklist value name instead of just a tick when a stage is completed. The original implementation works correctly, but I now have a requirement to exclude certain stages based on a condition.

Here is the working code before adding the condition:

import { LightningElement, wire, api } from "lwc";
import { getObjectInfo, getPicklistValues } from "lightning/uiObjectInfoApi";
import MY_OBJECT from "@salesforce/schema/My_Object__c";
import MY_OBJECT_STATUS from "@salesforce/schema/My_Object__c.Status__c";
import MY_OBJECT_ACCEPTANCE from "@salesforce/schema/My_Object__c.Parent__r.Acceptance__c";

export default class MyObjectPath extends LightningElement {
  @api objectApiName;
  @api recordId;
  stageOptions;
  status = MY_OBJECT_STATUS;
  acceptance = MY_OBJECT_ACCEPTANCE;

  currentStep = "slds-path__item slds-is-current";
  completeStep = "slds-path__item slds-is-active";
  incompleteStep = "slds-path__item slds-is-incomplete";

  @wire(getObjectInfo, { objectApiName: MY_OBJECT })
  myObject;

  @wire(getPicklistValues, {
    recordTypeId: "$myObject.data.defaultRecordTypeId",
    fieldApiName: MY_OBJECT_STATUS
  })
  picklistValues({ data }) {
    if (data) {
      let increment = 1;
      this.stageOptions = data.values.map((item) => {
        return {
          position: increment++,
          value: item.value,
          pathStatus: this.incompleteStep,
          tickIcon: false
        };
      });
    }
  }
}

To implement the conditional exclusion, I attempted the following approach, but it resulted in an error:

picklistValues({ data }) {
  if (data) {
    let increment = 1;
    this.stageOptions = data.values.map((item) => {
      if (item.value === "Awaiting Approval" || item.value === "Contract Acceptance") {
        if (this.acceptance === "Enabled") {
          return {
            position: increment++,
            value: item.value,
            pathStatus: this.incompleteStep,
            tickIcon: false
          };
        }
      } else {
        return {
          position: increment++,
          value: item.value,
          pathStatus: this.incompleteStep,
          tickIcon: false
        };
      }
    });
  }
}

The error message states:

Array.prototype.map() expects a value to be returned at the end of arrow function.

If I ignore this error, the component fails to function correctly. How can I properly exclude these stages based on the condition?

Answer

The error occurs because Array.prototype.map() requires a value to be returned for every iteration. When the condition item.value === "Awaiting Approval" || item.value === "Contract Acceptance" is met but this.acceptance !== "Enabled", the function does not return anything, causing the issue.

Boost your career with CRS Info Solutions’ Salesforce online training, offering expert guidance and practical experience. Master the Salesforce ecosystem through comprehensive, hands-on learning.

A better approach is to first filter the list before mapping over it. Additionally, since this.acceptance === "Enabled" does not depend on the iteration, it should be checked before looping through the array.

Here’s the corrected implementation:

picklistValues({ data }) {
  if (data) {
    let increment = 1;
    const isAcceptanceEnabled = this.acceptance === "Enabled";
    this.stageOptions = data.values
      .filter((item) => isAcceptanceEnabled || (item.value !== "Awaiting Approval" && item.value !== "Contract Acceptance"))
      .map((item) => {
        return {
          position: increment++,
          value: item.value,
          pathStatus: this.incompleteStep,
          tickIcon: false
        };
      });
  }
}

Explanation: The code first checks if picklist data is available and initializes a counter. It then determines whether acceptance is enabled and filters out “Awaiting Approval” and “Contract Acceptance” if it’s not. Finally, it maps the remaining values into an array of stage objects with position, value, path status, and tick icon properties.

Summing Up

To conditionally exclude certain stages in an LWC custom Path, first filter out unwanted values before mapping over the list. This prevents issues with Array.prototype.map(), which requires a return value for every iteration. By checking conditions upfront and using .filter(), the logic remains clean, efficient, and error-free.

Salesforce Training in Chandigarh – Accelerate Your Career Today!

Unlock your potential with our industry-recognized Salesforce training program in Chandigarh, tailored for aspiring professionals and seasoned experts alike. Gain in-depth knowledge of Salesforce CRM, hands-on experience with real-world projects, and expert guidance to help you ace certifications like Salesforce Admin and Developer. Our curriculum is designed to make you job-ready and elevate your career to new heights.

Our focuses on practical, industry-relevant learning. Salesforce training in Chandigarh With personalized guidance, comprehensive course materials, and expert support for certification and interview prep, we make sure you’re job-ready.

Enroll today for a free demo session and take the first step towards a successful Salesforce career!!!

Related Posts:

Events in Lightning web components (LWC)
What are Lightning Web Components?