I am passing data to the view of the component by $user->profile->profile_pic when I dd in that view it shows the desired value perfectly. But when I use that in some conditions or in tags to print that value it says that Attempt to read property "profile_pic" on null. Although, It is not because I can die and dump that and that value can be seen

Usage of the component:

<x-details 
     :user="$user->id"
       
      letter="{{ $user->username[0] }}" 
       editable="{{ Auth::user()->username == $user->username }}"
       profile_pic="{{ $user->profile->profile_pic }}"
 />

The component

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use App\Models\User;
use Illuminate\Support\Facades\DB;

class details extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $user;
    public function __construct($user = 1)
    {
        $this->user = $user;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        $user = User::with(['profile'])->firstWhere("id", $this->user);
        $pic = $user->profile->profile_pic;
        return view('components.details', compact("pic"));
    }
}

The view of the component

<div>
    
    @props([
        "letter" => "A", 
        "editable" => 0,
        "profile_pic" => 0
    ])
    {{-- @php
        $src = "";
        if($profile_pic) {
            $src = "/uploads/$profile_pic";
        } else {
            $src = url("fonts/icons/avatars/$letter.svg");
        }
    @endphp --}}
    <div>
        {{-- @dd($pic) --}}
        {{ $pic }}
        {{-- @if(!$editable)
            <a href="#" {{ $attributes->merge(["class" => "avatar"]) }}><img  src="{{ $src }}" alt="avatar"></a>
        @else 
            <form id="fileUpload">
                <a href="#" onclick="document.getElementById('upload_pic').click()" {{ $attributes->merge(["class" => "avatar"]) }} ><img id="output" style="width: 144px;"  src="{{ $src }}" alt="avatar"></a>
                <input  type="file" name="upload_pic" id="upload_pic">
            </form>
        @endif --}}
    </div>
</div>

CodePudding user response：

Inside the component, you should use $this:

So instead of

$pic = $user->profile->profile_pic

You should do

$pic = $this->user->profile->profile_pic

CodePudding user response：

It's a common issue when you trying to dd() something in foreach, it will always dump first item only and die, so you are always confirm first item and think it work as well as expected.

In your case, there is probably some user doesn't have profile_pic or profile don't have any profile_pic related on it.

Try to use the code below to debug with it in your component.

public function render()
{
    try {
        $user = User::with(['profile'])->firstWhere("id", $this->user);
        $pic = $user->profile->profile_pic;
        return view('components.details', compact("pic"));
    } catch (Exception $e) {
        dd($user->profile);
    }
}