Laravel Livewire : livewire multiple root elements detected - laravel

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

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>

Answer 2

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 3

The error is as exact as it can be. A Livewire component simply can only have a single root element. Instead, you're adding 2, including 2 breaks.
Wrap the whole component into a single <div></div>, and then it should be fixed.

Answer 4

public $motorcycle_brands,$domisilis,$brand_id,$motorcycles;
public function render()
{
$this->domisilis = Domisili::all();
$this->motorcycles = Motorcycle::all();
if($this->brand_id){
$this->motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
} else {
$this->motorcycle_brands = [];
}
return view('livewire.kredit-multi');
}
Blade
#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" wire:model="brand_id">
<option value="" selected>Choose the motor version</option>
#foreach ($motorcycle_brands as $motor)
<option value="{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
#endforeach
</select>
</div>
</div>
#endif