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);
  }
}
3
  • 1
    We can't help you if you don't post the child component code. May 31, 2019 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.. May 31, 2019 at 12:45
  • you have to ckeck if it is not undefined (in other way you add a condition in order to send a not empty value <template if:true={checknameinputvalue}> <c-cHildTestLWC check-name={checknameinputvalue}></c-cHildTestLWC> </template>
    – boubou
    Sep 23, 2020 at 14:51

1 Answer 1

1

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.

2
  • 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.. May 31, 2019 at 12:56
  • @learningmode I updated my code. May 31, 2019 at 13:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .