0

I am trying to pass value from parent LWC component to child LWC component, but i am getting "undefined" error. Am i doing anything wrong.

Parent :

<template>
  <div>
    <lightning-input type="text" value={checknameinputvalue} name="CheckName" label="Check Name" required></lightning-input>
    <lightning-button label="Generate" title="Generate" class="slds-m-left_x-small" onclick={handleClick} ></lightning-button>
    <c-cHildTestLWC check-name={checknameinputvalue}></c-cHildTestLWC>
  </div>
</template>

JS:

import { LightningElement, track } from "lwc";

export default class TestcheckDetails extends LightningElement {
  @track checknameinputvalue;

  handleClick(event) {
    this.checknameinputvalue = event.target.value;
    console.log(event.target.value);
  }
}
  • 1
    We can't help you if you don't post the child component code. – Martin Lezer May 31 '19 at 12:41
  • child component is 1000 line of code.. i cant paste it...The error which i am getting is console.log(event.target.value); is showing undefined.. – learningmode May 31 '19 at 12:45
0

The problem comes from the fact that you're trying to set the value from the click event on the button. The property event.target is the button itself because the event is raised by the button.

You have to add an event to the lightning-input when the input is changed. Then, you'll be able to get the current value.

The right code for your component is:

<template>
  <div>
    <lightning-input type="text" value={checknameinputvalue} name="CheckName" label="Check Name" required onchange={handleInputChange}></lightning-input>
    <lightning-button label="Generate" title="Generate" class="slds-m-left_x-small" onclick={handleClick} ></lightning-button>
    <c-cHildTestLWC check-name={checkNameValue}></c-cHildTestLWC>
  </div>
</template>

And for your controller:

import { LightningElement, track } from "lwc";

export default class TestcheckDetails extends LightningElement {
  @track checknameinputvalue;
  checkNameValue;

  handleInputChange(event) {
    this.checknameinputvalue = event.target.value;
    console.log(event.target.value);
  }
  handleClick(event){
    this.checkNameValue = this.checknameinputvalue;
  }
}

EDIT

If you want the value to be only changed when the button is clicked, then you should add a second variable. The new variable will be send to your child component and will only be updated when the button is clicked thanks to a click event added to the button.

| improve this answer | |
  • Hi Martin, thanks for the code. but thts not what i want.. I want i will type something in the input text box and on the button click i want to assign tht value in the child component.So on button click i need tht value.. – learningmode May 31 '19 at 12:56
  • @learningmode I updated my code. – Martin Lezer May 31 '19 at 13:01

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.