0

I am trying to do display some data in the child component from Parent Component where my parent Component has an object variable that am using to display on my child component.

Here's Simple Snippet:

<template>
    Display Child Component Here::
    <template for:each={ceoList} for:item="item" for:index="i">
        <td key={item.id}>
            <c-render-changes-to-child item={item}></c-render-changes-to-child>
        </td>
    </template>

    <lightning-button onclick={changeHandler} label="Submit"></lightning-button>
</template>
import { LightningElement, api } from 'lwc';

export default class RenderChangesFromParent extends LightningElement {
    @api ceoList=[
        {id:"1", Company:"Google", Name:"Sunder Pichai"}, 
        {id:"2", Company:"Apple", Name:"Tim Cook"},
        {id:"3", Company:"Facebook", Name:"Mark Zuckerberg"}
    ]
    
    changeHandler(){
        ceoList[2].Company = "Toyota"
        ceoList[2].Name = 'Akio Toyoda'
        console.log(ceoList);
    }
}

and my child Component is::

<template>
    Company Name is : {item.Company} <br></br>
    Company Ceo is : {item.Name}<br></br>
</template>
import { LightningElement, api } from 'lwc';

export default class RenderChangesToChild extends LightningElement {
     @api item;
}

Onload it works perfectly fine. However, on a click of button I want to make changes to my object variable and also want this to reflect on child. Is there a way to refresh my child component to reflect the changes?

Appreciate your help!

2
  • I think that your code is fine, the only error is Console with capital letter.. is console.log. If you put it in lowercase it should work. In any case, why using @api in parent... will it be received from outside? else, you can try with \@track in the ceoList attribute Sep 16 '21 at 14:03
  • It was just a Typo to have capital C. I just updated it and yeah, I created this snippet manually from the large code that am working on to make it easier to understand. I have tried both track and api both aren't working. I think am missing something like refresh or rerender? Not sure.
    – user102266
    Sep 16 '21 at 14:23
0

You could use getter and setter in order to pass the data from parent to child.

These are used to bind the data when there is a value change.

You can refer these links for further info:

https://trailhead.salesforce.com/en/content/learn/projects/communicate-between-lightning-web-components/communicate-from-parent-to-child

https://salesforcediaries.com/2020/06/15/value-change-handler-in-lightning-web-component-when-parent-passes-value-to-child/

Hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.