Pass values from parent to child LWC

Question

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);
  }
}

Answer 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.