onchange handler not displaying together with my if:true directive

Question

I am doing this udemy course for LWC Development and I am stuck on the part for conditional rendering. My goal is that I should be able to show and hide the div with the use if if:true and if:false directives but for some reason, I am not able to do it. I am sharing my html & js code below:

HTML:

    <lightning-input type="checkbox" label="Show Div" onchange={showDivHandler}>
        <template if:true={displayDiv}>
            <div>Hello again</div>
        </template>
        <template if:false={displayDiv}>
            <div>I am not here</div>
        </template>
    </lightning-input>
</template>

JS:

import { LightningElement, track } from 'lwc';
 
 export default class ConditionRenderingExample extends LightningElement {
     @track displayDiv = false;
  
     showDivHandler(event) {
         this.displayDiv = event.target.checked;
     }
 } 

I have tried adding @track in hopes of making the code work. Any explanations behind this would be really helpful as I have been stuck on this for 2 days already. Thank you.

Answer 1

you are almost there John, the only change you need to do is move the <template> tags outside the <lightning-input type="checkbox">, as follow:

<template>
    <lightning-input type="checkbox" label="Show Div" onchange={showDivHandler}>
    </lightning-input>
    <template if:true={displayDiv}>
        <div>Hello again</div>
    </template>
    <template if:false={displayDiv}>
        <div>I am not here</div>
    </template>
</template>