Write a code to pass a user input given in an Aura component to a child LWC component [closed]

Question

So there is a Parent Aura component and a Child LWC component. I have to take a user input in the Parent Aura component, and now in the child LWC component, I have to show that input. I am pretty new in salesforce so please someone explain me with a code on how I would do it.

Answer 1

To dynamically get the user input, capture the user entered data in javascript controller on onchange event-

To capture the entered value dynamically in javascript use the below code snippet-

event.getSource().get("v.value");

Further to pass the user entered value from Aura to LWC, Create an @Api javascript property in lwc and set it's corresponding value from Parent Aura component. You can refer the documentation for information.

Aura HTML Component :

<aura:component implements="flexipage:availableForRecordHome" access="global">
   <aura:attribute name="parentAttribute" type="String"/>
   <lightning:input name="Please Enter Some value" label="Enter some text" onchange="{!c.captureUserInput}"/>
   <!-- The below component is a LWC element -->
   <c:testLwc attributeFromParent="{!v.parentAttribute}"/>
</aura:component>   

Aura JS Controller :

({
captureUserInput : function(component, event, helper) {
    let userInput = event.getSource().get("v.value");
    component.set("v.parentAttribute", userInput);
}
})

LWC HTML Component(Name ===>"testLwc"):

<template>
  This is LWC : {attributeFromParent}
</template>

LWC JS Controller :

import { LightningElement,api } from 'lwc';

export default class TestLwc extends LightningElement {
   @api attributeFromParent;
}

Answer 2

You need to create an @api attribute on the child LWC and pass the value from the parent AURA after taking the user input.

check the following link for code example of getting user input in aura: Easiest way to get a value from a lightning:inputField

check the following link for code example of passing value from aura to lwc: https://salesforcediaries.com/2019/09/15/pass-value-to-lwc-from-parent-aura-component/