Laravel/Inertia: i'm failing to associate a relation between two models

Question

I am currently using Laravel, Inertiajs and Reactjs to create a project, and I need some help to link a package model to a state via a foreing key

this is the code if you can identify the problem:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('states', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string('name')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('states');
    }
};

package migration:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('packages', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string('article');
            $table->foreignId('state_id');
            $table->double('prix',8,2)->nullable();
            $table->string('phone')->nullable();
            $table->text('adresse')->nullable();
            $table->string('client')->nullable();
            $table->string('ville')->nullable();
            $table->text('remarque')->nullable();



        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('packages');
    }
};

models:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class State extends Model
{
    use HasFactory;
    public function Package()
    {
        return $this->hasMany(Package::class);
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Package extends Model
{
    use HasFactory;
    public function State()
    {
        return $this->belongsTo(State::class);
    }
}

package Controller:

<?php

namespace App\Http\Controllers;

use App\Models\Package;
use App\Models\State;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Symfony\Contracts\Service\Attribute\Required;

class PackageController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        return Inertia::render('Colis/Colis',[
            'colis' => Package::all()
        ]);
  
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
    
        return Inertia::render('Colis/Colis.create');

    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request )
    {
        $request->validate([
            'article' =>' Required|min:4'
        ]);
        $colis = new Package();
        $colis->article = $request->article;
        $colis->client = $request->client;
        $colis->prix = $request->prix;
        $colis->remarque = $request->remarque;
        $colis->phone = $request->phone;
        $colis->adresse = $request->adresse;
        $colis->ville = $request->ville;
        $colis->state_id= 2;



        $colis->save();
    }

    /**
     * Display the specified resource.
     */
    public function show(Package $package)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Package $package)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, Package $package)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Package $package)
    {
        //
    }
}

{props.colis.map((item, key) => { return

                                <td><p href="#" className="text-body"> {item.article} </p></td>
                                <td><span className="badge badge-soft-warning mb-0">{console.log(item)}</span></td>
    
            
                            </tr>
                              })}      

when i console log colis objcet this is the result: { "id": 1, "created_at": "2023-05-01T22:36:28.000000Z", "updated_at": "2023-05-01T22:36:28.000000Z", "article": "TODLICH COULEUR ", "state_id": 2, "prix": 200, "phone": "062360984", "adresse": "nN 362 CASA", "client": "ZACK", "ville": null, "remarque": "ok" }

i want to show the state of the package but i only get the state_id

Answer 1

You need eager loading State relationship using with() method, try the below:

 public function index()
 {
    return Inertia::render('Colis/Colis',[
       'colis' => Package::with('State')->get()
    ]);
  
 }