handling child component called multiple times on Parent Component in LWC

Lightning Web Component allows you to fire public method defined on child component from parent component. But, what if you are using the same child component multiple times on parent component? Learn handling child component called multiple times on parent component in Lightning web component. Our aim is to fire a public method defined on child component for each of the child component called on the parent component.

Component Design

Code Description

• We have two component:- reusableChildComponent and ParentWhereMultipleChildComponentExist.
• reusableChildComponent has lightning input field.
• reusableChildComponent also has a public method defined to check the input field values and show error based on it.
• reusableChildComponent has been called multiple times in ParentWhereMultipleChildComponentExist component.
• ParentWhereMultipleChildComponentExist also has a button with onclick handler to check all the reusableChildComponent‘s input field validity.

Code

reusableChildComponent.html

It just have lightning input tag with attribute Label which can be passed by parent component as it annonated with @api. Also, It has class defined which will allow to access the element and check the validity of input field.

<template>
  <lightning-input
    type="number"
    name="input1"
    label={inputLabel}
    class="inputCmp"
  ></lightning-input>
</template>

reusableChildComponent.js

It contains the public method called checkValidity which checks the validity of input field and set a custom error message. Once checked, the error comes on the field.

import { LightningElement, api } from "lwc";

export default class ReusableChildComponent extends LightningElement {
  @api inputLabel;
  
  @api checkValidity() {
    var inputCmp = this.template.querySelector(".inputCmp");
    var value = inputCmp.value;
    // is input is valid?
    if (!value) {
      inputCmp.setCustomValidity("Please Enter a valid Value");
    } else {
      inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
    }
    inputCmp.reportValidity(); // Tells lightning-input to show the error right away without needing interaction
  }
}

reusableChildComponent.js-meta.xml

We have not exposed it to any type of page in Lightning as we are not going to use it directly. We are calling it another component as an reusable component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="reusableChildComponent">
    <apiVersion>46.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

parentWhereMultipleChildComponentExist.html

This component is calling the reusable-child-component multiple times by passing different label values for each of them. It also has a button to check the validity of each input field that exist in reusable-child-component called here.

<template>
  <c-reusable-child-component input-label="Lable1"></c-reusable-child-component>
  <c-reusable-child-component input-label="Lable2"></c-reusable-child-component>
  <c-reusable-child-component input-label="Lable3"></c-reusable-child-component>
  <lightning-button
    variant="brand"
    label="Check Validity"
    title="Check Validity"
    onclick={handleClick}
    class="slds-m-left_x-small"
  ></lightning-button>
</template>

parentWhereMultipleChildComponentExist.js

handleClick method access all the elements using this.template.querySelectorAll(“c-reusable-child-component”) and runs a for loop to check the validity in each of them.

import { LightningElement } from "lwc";

export default class ParentWhereMultipleChildComponentExist extends LightningElement {
  handleClick() {
    this.template
      .querySelectorAll("c-reusable-child-component")
      .forEach(element => {
        element.checkValidity();
      });
  }
}

parentWhereMultipleChildComponentExist.js-meta.xml

The meta file has exposed it in lightning record, app and home pages in Lightning App Builder. You can place it anywhere in one of them and test it.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentWhereMultipleChildComponentExist">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Demo

When you don’t have any value in the fields, error will come up on click of check validity button. Once you provide some value and again click on the button, the error disappears.