Component error while creatinge record using LWC

Question

I am trying to create record for an object using LWC. But whenever I am trying to paste the component on a page it is showing up a component error as shown below:

My code as shown below:

HTML ->

<template>
<lightning-card title="NEW TEACHER FORM"> 
<div class="slds-p-around_x-small">
    <lightning-input label="Teacher Name" value={Name} onchange={handleNameChange}></lightning-input>
    <lightning-input label="Teacher Salary" value={Salary} onchange={handleSalaryChange}></lightning-input>
    <lightning-input label="Email" value={Email} onchange={handleEmailChange}></lightning-input>
    <lightning-input label="Phone" value={Contact} onchange={handlePhoneChange}></lightning-input><br/>
    <lightning-button label="Save" onclick={handleClick}></lightning-button>
</div>
</lightning-card>
</template>

JS ->

import { LightningElement, track } from 'lwc';
import TEACHER_OBJECT from '@salesforce/schema/Teacher__c';
import NAME_FIELD from '@salesforce/schema/Teacher__c.Name';
import PHONE_FIELD from '@salesforce/schema/Teacher__c.Contact_Number__c';
import EMAIL_FIELD from '@salesforce/schema/Teacher__c.Email__c';
import SALARY_FIELD from '@salesforce/schema/Teacher__c.Salary__c';
import newTeacher from '@salesforce/apex/createTeacher.newTeacher';

export default class CreateTeacherRecord extends LightningElement {
@track error;
@track teacherRec ={ 
NAME_FIELD:Name,
EMAIL_FIELD:Email,
PHONE_FIELD:Contact,
SALARY_FIELD:Salary}

handleNameChange(event){
this.teacherRec.Name = event.taget.value;
}

handleSalaryChange(event){
this.teacherRec.Salary = event.taget.value;
}

handleEmailChange(event){
this.teacherRec.Email = event.taget.value;
}

handlePhoneChange(event){
this.teacherRec.Contact = event.taget.value;
}

handleClick(event){
newTeacher({newTeacherRec:this.teacherRec})
.then(result=>{
    this.teacherRec={};
})
.catch(error=>{
    this.error = error.message;
});
}
}

XML ->

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

APEX ->

public with sharing class createTeacher {
    @AuraEnabled
    
    public static Teacher__c newTeacher(Teacher__c newTeacherRec) {
        newTeacherRec.Name = '';
        insert newTeacherRec;
        return newTeacherRec;
    }
}

If I forcefully add the component on the page, then the page never reloads.

Answer 1

erThat's the Name: value in the teacherRec property. It doesn't have a value, so it's undefined. Try declaring it like this. If you are just creating a record the can use the UI Record API. You don't need Apex. Test this out.

Edit. I see an issue here. You don't need to declare teacherRec at all.

import { LightningElement, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Teacher__c.Name';
import PHONE_FIELD from '@salesforce/schema/Teacher__c.Contact_Number__c';
import EMAIL_FIELD from '@salesforce/schema/Teacher__c.Email__c';
import SALARY_FIELD from '@salesforce/schema/Teacher__c.Salary__c';
import TEACHER_OBJECT from '@salesforce/schema/Teacher__c';

export default class CreateTeacherRecord extends LightningElement {
    teacherRec;

    handleNameChange(event){
        this.teacherRec[NAME_FIELD] = event.taget.value;
    }

    handleSalaryChange(event){
        this.teacherRec[SALARY_FIELD] = event.taget.value;
    }

    handleEmailChange(event){
        this.teacherRec[EMAIL_FIELD] = event.taget.value;
    }

    handlePhoneChange(event){
        this.teacherRec[PHONE_FIELD] = event.taget.value;
    }
    // In your handle click
    async handleClick(event){
        try {
            const fields = this.teachRec;
            const recordInput = { apiName: TEACHER_OBJECT.objectApiName, fields };
            // Result will contain the id
            const result = await createRecord(recordInput);
        } catch (error) {
            this.error = error.message;
        }
    }
}