How customize Repeater's item using Livewire component?

[josevictor-ultrahaus]

Package

Form builder

Package Version

v3.2.115

How can we help you?

Livewire 3x.

I have a Livewire component OpportunityQuote that has a Repeater in its structure, like this:

class OpportunityQuote extends Component implements HasForms
{
    use InteractsWithForms, CanGenerateUuids;

    public $quote_services = [];

    public function mount()
    {
        $this->quote_services = [];
        $this->form->fill([
            'quote_services_repeater' => $this->quote_services,
        ]);
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([

                Repeater::make('quote_services_repeater')
                    ->label('Serviços Adicionados')
                    ->itemLabel(function (array $state) {
                        return new HtmlString(
                            view('filament.components.service-repeater-item')
                                ->with('state', $state)
                                ->render()
                        );
                    })
                    ->schema(function (array $state) {
                        return [

                            // Livewire::make(OpportunityQuoteItem::class, [
                            //     'item' => $state
                            // ]),

                            TextInput::make('name')
                                ->email()
                                ->label('Email'),
                        ];
                    })
                    ->columns(4)
                    ->defaultItems(1)
                    ->collapsible()
                    ->collapsed()
                    ->orderable(false)
                    ->addable(false)

            ])->statePath('quote_services');
    }

    public function onAddedService($item, $index)
    {
        $uuid = $this->generateUuid();

        $this->quote_services['quote_services_repeater'][$uuid] = $item;

        $this->form->fill([
            'quote_services_repeater' => $this->quote_services['quote_services_repeater'],
        ]);
    }

For each item in my Repeater, I will have another custom Livewire component.

class OpportunityQuoteItem extends Component
{
    public ?array $item = [];

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

    public function render()
    {
        return view('livewire.opportunity.quote-item');
    }
}

How do I make each line of my Repeater with custom component to have the current item?

If we look at the itemLabel method, it has by default a $state that represents the current line, so you can customize the title.

But, Within the schema method, the variable $state does not just represent a line, but rather the state of the Repeater as a whole, being multi-dimensional array.

But, how do I do this?