I need some assistance with displaying a text input field based on the value of the "changeEmail" variable. I have a handleClick function that toggles the value of "changeEmail" between true and false, but when I click on a button, nothing happens. Any guidance would be greatly appreciated.
let changeEmail = false;
function handleClick() {
console.log(changeEmail)
changeEmail = !changeEmail;
}
$: changeEmail;
</script>
<div class="card">
<div class="info-column">
<h2>About</h2>
<div class="info-field">
<h4>Name</h4>
{userModel.firstName} {userModel.lastName}
</div>
<div class="info-field">
<h4>Email</h4>
{#if changeEmail === false}
{userModel.email}
{:else}
<TextInput placeholder="${userModel.email}"/>
{/if}
<Button on:click={handleClick}>Edit</Button>
</div>
</div>
</div>
This component resembles the following structure on the page:
<section>
<PersonalSettingsCard userModel={$user}>
</PersonalSettingsCard>
</section>