I’m building a modal that can have multiple forms, depending on the number of sets. This is the structure.

workouts.edit-logger.blade.php

<div>
    <x-card title="{{ $planner->exercise->name }}">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
            <thead>
                <tr>
                    <th scope="col" class="px-2 py-3 text-xs font-medium text-gray-500 uppercase text-start dark:text-neutral-500">Set</th>
                    <th scope="col" class="px-2 py-3 text-xs font-medium text-gray-500 uppercase text-start dark:text-neutral-500">Reps</th>
                    <th scope="col" class="px-2 py-3 text-xs font-medium text-gray-500 uppercase text-start dark:text-neutral-500">Load</th>
                    <th scope="col" class="px-2 py-3 text-xs font-medium text-gray-500 uppercase text-start dark:text-neutral-500">Reps In Reserve</th>
                    <th scope="col" class="px-2 py-3 text-xs font-medium text-gray-500 uppercase text-start dark:text-neutral-500">Notes</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
                @foreach ($planner->loggers as $logger)
                    <livewire:workouts.edit-set :$logger :key="$logger->id" />
                @endforeach
            </tbody>
        </table> 
        <x-slot name="footer">
            <div class="flex justify-between gap-x-4">
                <x-button flat label="Cancel" wire:click="closeModal" />
            </div>
        </x-slot>
    </x-card>
</div>

EditLogger.php

<?php

namespace AppLivewireWorkouts;

use AppModelsWorkoutExercise;
use LivewireUIModalModalComponent;

class EditLogger extends ModalComponent
{    
    // public int $planner;
    public WorkoutExercise $planner;

    public function mount(WorkoutExercise $planner)
    {
        $this->planner = $planner;
    }

    public function render()
    {
        return view('livewire.workouts.edit-logger');
    }
}

workouts.edit-set.blade.php

<?php

use AppLivewireFormsLoggerForm;
use AppModelsWorkoutExerciseLogger;
use LivewireAttributesModelable;
use LivewireVoltComponent;

new class extends Component {
    #[Modelable] 
    public LoggerForm $form;

    public function mount(WorkoutExerciseLogger $logger)
    {
        $this->form->setLogger($logger);
    }

    public function save()
    {
        $this->form->update();
        session()->flash('status', 'Successfully updated.');
    }
}; ?>

<div>
    <form wire:submit="save" >
        <tr class="hover:bg-gray-100 dark:hover:bg-neutral-700">
            <td class="px-2 py-4 text-sm font-medium text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <p>{{ $this->form->set }}</p>
            </td>
            <td class="px-2 py-4 text-sm font-medium text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <x-inputs.number id="pr{{ $this->form->set }}" wire.model="form.performedReps" placeholder="0" />
            </td>
            <td class="px-2 py-4 text-sm text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <x-inputs.number id="l{{ $this->form->set }}" wire:model="form.load" placeholder="0" />
            </td>
            <td class="px-2 py-4 text-sm text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <x-inputs.number id="rir{{ $this->form->set }}" wire:model="form.repsInReserve" placeholder="0" />
            </td>
            <td class="px-2 py-4 text-sm text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <x-input id="n{{ $this->form->set }}" wire:model="form.notes" placeholder="Add notes if needed" />
            </td>
            <td class="px-2 py-4 text-sm text-gray-800 whitespace-nowrap dark:text-neutral-200">
                <x-button.circle type="submit" icon="check-circle" green interaction="negative" label="Save"/>
            </td>
        </tr>
    </form>
</div>

LoggerForm.php

<?php

namespace AppLivewireForms;

use AppModelsWorkoutExerciseLogger;
use LivewireAttributesValidate;
use LivewireForm;

class LoggerForm extends Form
{
    public WorkoutExerciseLogger $logger;

    #[Validate('required')]
    public $set;
 
    #[Validate('required')]
    public $load;

    #[Validate('required')]
    public $performedReps;
 
    public $repsInReserve;
 
    public $notes = '';

    public function setLogger(WorkoutExerciseLogger $logger)
    {
        $this->logger = $logger;
 
        $this->set           = $logger->set;
        $this->load          = $logger->load;
        $this->performedReps = $logger->performedReps;
        $this->repsInReserve = $logger->repsInReserve;
        $this->notes         = $logger->notes;
    }

    public function update()
    {
        $this->validate();

        $this->logger->update(
            $this->all()
        );
    }
}

I’m getting the following console warning for all form fields: Livewire: [wire:model=”form.repsInReserve”] property does not exist on component: [workouts.edit-logger]

And the form is not being built on the page
as you can see here

I’m new to Livewire and I really don’t understand the issue. Am I overusing components? How can I solve this issue?

I’ve tried moving to a Livewire component instad of a Volt component. It didn’t work.