Undefined variable $categorie_id issue in Livewire Blade view

I am trying to fetch all subcategories related to a single category with Livewire but am getting an error.

Undefined variable $categorie_id.

The thing is, I’m trying to fetch and render the souscategories for a given category.

Category

public function souscategories()
{
    return $this->hasMany(Sous_categorie::class, 'categorie_id', 'id');
}

Sous_categorie

public function categories()
{
    return $this->belongsTo(Categorie::class,'categorie_id','id');
}

As you can see, there’s a relationship between the Category and Sous_categorye models.

My Component code where I fetch all Categories:

class DropMenu extends Component
{
    public $categories;
    public $sous_categories;

    public function mount($categorie_id)
    {
        $this->categories = Categorie::findOrFail($categorie_id);
    }

    public function render()
    {

        return view('livewire.drop-menu');
    }
}

And this is my blade view:

<div>
    <ul>
        @foreach ($categories->souscategories as $subcategory) 
            <li>{{ $subcategory->nom }}</li>
        @endforeach
    </ul>
</div>

And inside my Main Blade file:

<ul role="tree">
                    @foreach ($categories as $item)
                    <li class="haschildren" role="treeitem" aria-expanded="false">
                        <div>
                            <a href="#" class="link font-bold font-display text-base text-jacarta-700 dark:text-white hover:text-accent focus:text-accent  dark:hover:text-accent dark:focus:text-accent">{{ $item->nom }}</a>
                            <a aria-label="Expand submenu" href="#" data-aria-label="Expand submenu" data-aria-label-active="Collapse submenu" class="expand flex font-bold text-jacarta-700 dark:text-white">2
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class=" dark:fill-white">
                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                    <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
                                </svg>
                            </a>
                        </div>
                        @livewire('drop-menu', ['categorie_id' => $categorie_id])
                         
                    </li>
                    @endforeach
                </ul>

I am new to Livewire, so I haven’t tried anything yet. Please feel free to tell me what I did wrong and if there’s a better way to do it.

>Solution :

You’re encountering an error because the variable $categorie_id is not defined in the context where you’re trying to use it. In your main Blade file, you’re trying to pass $categorie_id to the drop-menu Livewire component, but it seems like $categorie_id is not defined anywhere in that file.

Instead, you should pass $item->id as the categorie_id, because $item is the current category in your @foreach loop.

Replace this line in your main Blade file:

@livewire('drop-menu', ['categorie_id' => $categorie_id])

With this:

@livewire('drop-menu', ['categorie_id' => $item->id])

This will pass the ID of the current category to your Livewire component, which should resolve the "Undefined variable" error.