Laravel Livewire : livewire multiple root elements detected

Question

I'm currently developing a website using laravel livewire

The website has a multi-site form page, and there's a dynamic dropdown on the inside of that multi-site form page

The problem is when the form is filled, it won't store the data into the database

When i do inspect the website there's an error that read :livewire multiple root elements detected

How do i fix this??

Livewire model :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Kredit;
use App\Models\Biaya;
use App\Models\Produk;
use App\Models\Promo;
use App\Models\Motorcycle;
use App\Models\MotorcycleBrand;
use App\Models\Domisili;

class KreditMulti extends Component
{
    public $brand_id;

    public function render()
    {
        $domisilis = Domisili::all();
        // $motorcycles = Motorcycle::all();
        // $motorcycle_brands = MotorcycleBrand::all();

        //for the dynamic dropdown
        if($this->brand_id){
            $motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
        } else {
            $motorcycle_brands = [];
        }

        return view('livewire.kredit-multi',
        ['domisilis'=>$domisilis])
                ->withMotorcycles(Motorcycle::all())
                ->with('motorcycle_brands', $motorcycle_brands);
    }
}

The livewire blade php :

<div class="form-group row">
            <label for="motorcycle" class="col-md-4">Merek motor</label>
            <div class="col-md-6">
                <select wire:model="brand_id" class="form-control">
                    <option value="" selected>Choose Motor</option>
                    @foreach ($motorcycles as $m)
                        <option value="{{$m->id}}">{{$m->motorcycle_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <br>
        @if (count($motorcycle_brands) > 0)
            <div class="form-group row">
                <label for="motorcycle_brand" class="col-md-4 col-form-label text-md-right">Jenis Motor</label>
                <div class="col-md-6">
                    <select class="form-control" name="motorcycle_brand_id">
                        <option value="" selected>Choose the motor version</option>
                        @foreach ($motorcycle_brands as $motor)
                            <option value="{{$motor->id}}" wire:key="motorcycle_brand{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif
        <br>

Answer 1

Your blade code has several roots

1.- <div class="form-group row"....>
2.-  <br>
3.-  @if (count($motorcycle_brands) > 0)...@endif
4.- <br>

Enclose all that stuff in a single root

<div>
   <div class="form-group row"....>
   <br>
   @if (count($motorcycle_brands) > 0)...@endif
   <br>
</div>

Answer 2

all livewire components must be start with a <div> and end with a </div>. actually you must wrap the whole <div> and </div> s into a single <div></div>

https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues