Render Child Component again with a Change on Parent

Question

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!

Answer 1

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.