Laravel Livewire VOLT, I get undefined variable name error

Question

I am trying to develop a page in which available appointments are listed. So the students will be able to choose one for foreign language talking exercise. Everything is fine. I get

Undefined variable $showConfirmationModal

error at line @if ($showConfirmationModal) .

I checked the variable names many times. This is because something else I guess. I also made a "find and replace" for $showConfirmationModal. I get the same error message.

I used the artisan commands:

php artisan cache:clear
php artisan view:clear

No help.

<?php

use App\Mail\AppointmentNotificationForStudent;
use App\Mail\AppointmentNotificationForTeacher;
use App\Models\TeacherAvailability;
use Carbon\Carbon;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Mail;
use Livewire\Component;
use Masmerise\Toaster\Toaster;

new class extends Component {
    public $showConfirmationModal = false;
    public $selectedAppointmentId = null;
    public $appointments = [];

    public function mount()
    {
        $this->loadAppointments();
    }

    public function loadAppointments()
    {
        $this->appointments = TeacherAvailability::where('date', '>=', now()->toDateString())
            ->orderBy('date', 'ASC')
            ->orderBy('time_start', 'ASC')
            ->get();
    }

    public function confirmSelectAppointment($appointmentId)
    {
        $this->selectedAppointmentId = $appointmentId;
        $this->showConfirmationModal = true;
    }

    public function selectAppointment()
    {
        $studentId = Auth::id();
        $availability = TeacherAvailability::find($this->selectedAppointmentId);

        if (!$availability) {
            Toaster::error('Appointment not found.');
            return;
        }
 
        $availability->update([
            'student_id'      => $studentId,
            'is_appointment'  => 0,
        ]);

        Toaster::success('Randevu başarıyla seçildi!');
        $this->showConfirmationModal = false;

        $student = Auth::user();
  
        $teacher = $availability->teacher;  
        $teacherEmail = $teacher->email;
        $teacherName  = $teacher->name;

        Mail::to($teacherEmail)->queue(new AppointmentNotificationForTeacher($availability, $teacherEmail, $student, $teacherName));
        Toaster::success('Notification sent to the teacher.');

        
        Mail::to($student->email)->queue(new AppointmentNotificationForStudent($availability, $student));
        Toaster::success('Appointment information sent you in an e-mail.');

        // Populate List
        $this->loadAppointments();
    }
};
?>
<div>
    <!-- I get error at the line below-->
    @if ($showConfirmationModal) 
        <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
            ...
        </div>
    @endif

    <!-- Appointment List -->
    <div>
       ...
       ...
    </div>
</div>

Answer 1

Finally I noticed that I have called the wrong "Component" Class.

use Livewire\Component;

should be

use Livewire\Volt\Component;

Now, everything is fine.