When button clicked on load it adds 'undefined' to array

Question

So I'm trying to make a form that accepts names. The input field will take in a name. When you press the submit button it will add the name to an array only if

• name!=null and
• and the name is not a duplicate

after that the array will be displayed below the input box.

For checking the input before adding to the array I used the following code:

    var name = String(this.studentName);

    name = name.trim();

    this.currentStudentName = name;
    if (this.listOfNames.includes(this.currentStudentName)) {
        alert('Duplicate name found!');
    } else if (this.currentStudentName === '') {
        alert('Emptry entry!');
    } else {
        this.listOfNames.push(this.currentStudentName);
    }
}

The code is working fine with duplicate values and empty values BUT

If on loading the page if I directly press the submit button, undefined is added to the array and the array is displayed with first entry as "undefined", but I do not want the undefined to be saved into the array.

example

Answer 1

To avoid adding undefined to the array when the page loads, you need to handle that case separately. You can add a condition to check if the input is not undefined before adding it to the array. Here's modified code:

handleSubmit() {
    if (typeof this.studentName !== 'undefined') {
        var name = String(this.studentName).trim();
        this.currentStudentName = name;

        if (this.currentStudentName === '') {
            alert('Empty entry!');
        } else if (this.listOfNames.includes(this.currentStudentName)) {
            alert('Duplicate name found!');
        } else {
            this.listOfNames.push(this.currentStudentName);
        }
    } else {
        alert('Name is undefined!');
    }
}