Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Cyberyann's avatar

Problem in child component in a list component

Hi

Got a problem in a basic livewire with child component in a list component

List component:

class ClientList extends Component
{
    public $search;

    public function render()
    {
        $clients = Client::where('name', 'like', '%' . $this->search . '%')->get();
        return view('livewire.client-list', ['clients' => $clients]);
    }
}

and its view

<div>
    <input type="text" wire:model.live="search" placeholder="Search clients...">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Orders</th>
            </tr>
        </thead>
        <tbody>
        @foreach($clients as $client)
            <tr>
                <td>{{ $client->name }}</td>
                <td><livewire:client-orders :clientId="$client->id" :key="$client->id"/></td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

and the child

class ClientOrders extends Component
{
    public $clientId;

    public function render()
    {
        $orders = Order::where('client_id', $this->clientId)->get();
        return view('livewire.client-orders', ['orders' => $orders]);
    }
}

and its view

<div>
    <ul>
        @foreach($orders as $order)
            <li>{{ $order->order_details }}</li>
        @endforeach
    </ul>
</div>

First display works. But when i select some character in search input the display got this :

Name	Orders
Loic	< wire:id="CyDTLrkhvSucK2iTktB4">

and this error in debug console

Uncaught Component not found: CyDTLrkhvSucK2iTktB4

What is wrong in my code ?

0 likes
7 replies
tykus's avatar

Try also adding wire:key on the client-orders view; DOM-diffing issues often are associated with Livewire being unable to

<div>
    <ul>
        @foreach($orders as $order)
            <li wire:key="order-{{$order->id}}">{{ $order->order_details }}</li>
        @endforeach
    </ul>
</div>

I would suggest you look into pagination and eager-loading because you are going to have a potentially big N+1 issue

Cyberyann's avatar

Same result with the change in client-order view.

I know for the pagination but actually i just try with only 3 clients.

tykus's avatar

@Cyberyann can you isolate which Component is causing the issue; maybe try rendering and searching the ClientList only (without the ClientOrders)?

Cyberyann's avatar

No problem when removing the child component. What i can see is, for the first display every thing is display but when the list change, child component are badly redefine

Cyberyann's avatar

Not work. Did somebody reproduce this problem ?

Cyberyann's avatar

is it possible to order the traitement of display components? when i take a look at the response of update, got this:

If component are manage in the order of the file, it's seems to be normal to have the error. In first component(the parent) we can the the html that have only the first child component. The second work because it's recreate by the first The two others are not created by the first so it's normal to not found them and when a component is not found, got the error and livewire not work after this

or can we say to livewire to continue even if there is this error ?

Please or to participate in this conversation.