How to pass numbers to components

I’m copying the example from the docs and can’t get an image to render or the component to even recognize I’m passing a value. It keeps saying it’s null

I have verified that my variable $callout_image contains the image ID in the same file calling the component

template rendering component

<x-callout title={{$callout_title}} :image_id="$callout_image">
  {!!$callout_content!!}
</x-callout>

Component view file

<div {{$attributes}} class="border border-neutral-50/30 bg-slate-50/10  rounded-tr-3xl rounded-bl-3xl">
    @if($imageElement)
        <figure>{!! $imageElement !!}</figure>
    @endif
    @dump($imageElement)
    <div class="p-4">
        <h2 class="text-xl">{{$title}}</h3>
        {!! $slot !!}
    </div>
</div>

COmponent Composer

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Callout extends Component
{



    public $imageElement;

    protected $image_id;


    /**
     * The callout title
     *
     * @var string
     */
    public $title;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct( $title, $image_id = null)
    {
        $this->title = $title;
        $this->image_id = $image_id;
        $this->imageElement = $this->getImage();
    }

    protected function getImage()
    {
        if (!is_numeric($this->image_id)) {
            return false;
        }

        return wp_get_attachment_image($this->image_id, 'medium_large');
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.callout');
    }
}

Have you tried the casing recommendations from the Blade docs? Blade Templates - Laravel - The PHP Framework For Web Artisans

1 Like

this worked, thank you! Is there a reason why the example page in docs doesn’t follow this pattern?

Probably a mistake. I encourage you to file a pr to fix it! Sign in to GitHub · GitHub

2 Likes

Thanks a lot for that docs PR @bbuilds :smiley:

1 Like

glad I could help! I love what ya’ll are doing.

2 Likes