Show again a hide field LWC

Question

Hello everybody I am working in a LWC trying to show and hide two fields when one is filled with data the other one is hided. And if this filled field is erased the other one appears. And vice versa. So in my .js I have this:

    ocultarCamposNombrePrimerApellido= false;
handleRazonSocial(event){
    this.razonSocial = event.detail.value;
    console.log('razon social---'+ this.razonSocial);
    if(!this.razonSocial){
        this.ocultarCamposNombrePrimerApellido = false;
        console.log('false');
    }
    if(this.razonSocial != null){
        this.ocultarCamposNombrePrimerApellido = true;
        console.log('true');
    }
}
ocultarCampoRazonSocial=false;
handleNombre(event){
    this.nombre = event.detail.value;
    if(this.nombre != null && this.primerApellido != null){
        this.ocultarCampoRazonSocial = true;
    }else{
        this.ocultarCampoRazonSocial = true;
    }
}

and in my .html:

<template if:false={ocultarCamposNombrePrimerApellido}>
    <lightning-input type="text" label="Primer Apellido" max-length="45"  required name="primerApellido"  onchange={handlePrimerApellido}></lightning-input>
    <lightning-input type="text" label="Segundo Apellido" max-length="45" name="segundoApellido"  onchange={handleSegundoApellido}></lightning-input>    
</template>
<template if:false={ocultarCamposNombrePrimerApellido}>
    <lightning-input type="text" label="Nombre" max-length="45"  required name="nombre"  onchange={handleNombre}></lightning-input>
</template>

At the begining the fields are showed correctly but when I fill one field and erase its value to nothing the other fields does not appear. Can anybody tell me where is the issue? Thanks.

Answer 1

The problem you are facing is because the Falsy from Javascript -> https://developer.mozilla.org/en-US/docs/Glossary/Falsy

in other words lines if(!this.razonSocial) and the line if(this.razonSocial != null) are being evaluated wrong, because if the value is one of the Falsy values it will execute both statements

The first if will be true when one of these values is in it:

I would suggest the following modifications:

    ocultarCamposNombrePrimerApellido= false;
    handleRazonSocial(event){
        this.razonSocial = event.detail.value;
        console.log('razon social---'+ this.razonSocial);
        if(this.razonSocial){
            this.ocultarCamposNombrePrimerApellido = true;
            console.log('true');
        } else {
            this.ocultarCamposNombrePrimerApellido = false;
            console.log('true');
        }
    }
    ocultarCampoRazonSocial=false;
    handleNombre(event){
        this.nombre = event.detail.value;
        if(this.nombre && this.primerApellido){
            this.ocultarCampoRazonSocial = true;
        }else{
            this.ocultarCampoRazonSocial = false;
        }
    }

    <template if:false={ocultarCamposNombrePrimerApellido}>
        <lightning-input type="text" label="Primer Apellido" max-length="45"  required name="primerApellido"  onchange={handlePrimerApellido}></lightning-input>
        <lightning-input type="text" label="Segundo Apellido" max-length="45" name="segundoApellido"  onchange={handleSegundoApellido}></lightning-input>    
        <lightning-input type="text" label="Nombre" max-length="45"  required name="nombre"  onchange={handleNombre}></lightning-input>
    </template>