conditional rendering is not happening to display child component

Question

I am trying to render conditionally to display child component. But it is not happening. on button click i am getting the values, but child component is not getting displayed.

    <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>
<template if:true={boolgotochild}>
        <c-b-c-p-contract-t-o-p check-name={checkNameValue}></c-b-c-p-contract-t-o-p>
</template>
      </div>
    </template>

JS -

     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;
      }
  get boolgotochild() {
    return this.checkNameValue != null;
  }
    }

Answer 1

The below code is not reactive, i.e., the code block inside if:true won't get re-rendered if values being referred in the condition changes. This is more of static in nature, i.e., if:true will be evaluated only once when your component gets rendered. Thereafter any change on the property being referred in the function referred in if:true won't have an impact on the DOM.

<template if:true={boolgotochild}>
    <c-b-c-p-contract-t-o-p check-name={checkNameValue}></c-b-c-p-contract-t-o-p>
</template>

---

You can utilize a tracked property here as below if you want to render the child component in the if:true block conditionally.

So, in JS declare a reactive property as below:

...
@track gotoChild = false;
...
handleClick(event){
    this.gotoChild = this.checknameinputvalue;
    ...
}

And then use this on your template as below. So every time the value on gotoChild changes, the block gets executed thus displaying or hiding the child component.

<template if:true={gotoChild}>
    <c-b-c-p-contract-t-o-p check-name={checkNameValue}></c-b-c-p-contract-t-o-p>
</template>