How to pass data from parent to child in lwc

There are two ways you can pass data from parent to child in lwc. The first and most preferred way is to pass the value as attribute from the parent component. The second method is by using javascript to set the public property on the child component.

1. By using HTML attributes

To pass data from a parent component to a child component in lwc:

  • Define a public property in the child component, e.g. @api name
  • Reference the public property as attribute in the parent component to pass data to child.

A sample code for passing data from parent to child in lwc is given below.

//Parent.html
<template>
    <c-child-component name="Decodeforce"></c-child-component>
</template>

//ChildComponent.js
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
    @api name;
}

Note : You may explore lwc:spread if you are passing multiple parameters from parent to child in lwc.

2. By setting child public property through javascript

To set a value on a child element using JavaScript, first, find the child component using the query selector, then set its public variable.

Below is a JavaScript function that sets the "name" property, as demonstrated in the previous example.

//ParentComponent.js
import { LightningElement,api } from 'lwc';
export default class ParentComponent extends LightningElement {
    handleUpdateChild(){
        template.querySelector('c-child-component').name = 'Decodeforce';
    }
}

A practical example - Shopping cart

Let's consider a simple scenario of a shopping cart where we have a parent component representing the shopping cart and a child component representing individual items in the cart.

The parent component is a container for shopping cart and it display the total price of all items in the cart.

The child component is the contained component that display the individual item with quantity, description and price. The child component gets its data from the parent component.

Creating a lwc component in visual studio code video

Sample code

1. shoppingCart (Parent component) 

//shoppingCart.html
<template>
    <h1>Your cart</h1>
    <hr/>
    <c-shopping-cart-item 
        cart-items={cartItems}>
    </c-shopping-cart-item>
    <p>Total : $ {totalPrice}</p>
<template>

//shoppingCart.js
import { LightningElement } from 'lwc';
export default class ShoppingCart extends LightningElement {

    cartItems = [ { "name": "Item 1", "quantity": 2, "price": 15, "id": "item1" }, { "name": "Item 2", "quantity": 1, "price": 50, "id": "item2" } ];
    
    get totalPrice(){
        let totalPrice = 0;
        this.cartItems.forEach((item) => { 
            totalPrice += item.price;
        });
        return totalPrice;
    }
}

2. shoppingCartItem (Child component) 

//shoppingCartItem.html
<template>
    <template for:each={cartItems} for:item="item">            
        <div class="slds-grid slds-gutters"  key={item.id}>
            <div class="slds-col">
                <span class="slds-p-around_xx-small">{item.quantity}</span>
                <span class="slds-p-around_xx-small">x</span>
                <span class="slds-p-around_xx-small">{item.name}</span>
            </div>
            <div class="slds-col">
                <span>$ {item.price}</span>
            </div>
        </div>
    </template>
</template>

//shoppingCartItem.js
import { LightningElement,api } from 'lwc';

export default class ShoppingCartItem extends LightningElement {

    @api cartItems;
}

Complete source code with slds styling can be found here on github https://github.com/decodeforce/salesforce/tree/main/lwc-practice/Shopping%20Cart

PreviousNext