Variable undefined error in laravel blade component view

Question

Component InputError.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class InputError extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

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

Blade input-error.blade.php

@props(['for'])

@error($for)
    <label {!! $attributes->merge(['class' => 'error']) !!}>
        {{ $message }}
    </label>
@enderror

Blade View

<x-input-error for="title" />

Errors

Undefined variable: for

i'm not want change original jetstream component, how can i fix it?

Answer 1

From the docs:

You should define the component's required data in its class constructor. All public properties on a component will automatically be made available to the component's view. It is not necessary to pass the data to the view from the component's render method: (...)

So, in your case:

class InputError extends Component
{
    public $for;

    public function __construct($for)
    {
        $this->for = $for;
    }

    public function render()
    {
        return view('components.input-error');
    }
}

Then you should be able to pass data:

<x-input-error for="my-title" />

PS: I think the issue is with the use of the @prop directive. The directive is used in anonymous components that don't have a dedicated component class linked to the view. I almost always use anonymous components so I cannot be fully sure of this behaviour.

PS2: In your <label> tag use the {{ }} instead of {!! !!} {!! !!}

Answer 2

input.php

class Input extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $type;
    public $inputclass;
    public function __construct($inputclass=null,$color='primary')
    {
        $this->inputclass = $inputclass ?? "w-full px-4 py-2 border rounded-md dark:bg-darker dark:border-gray-700 focus:outline-none focus:ring focus:ring-$color-100 dark:focus:ring-$color-darker";
    }

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

input.blade.php

@props(['class'=>'','name'=>''])
<input 
    {{ $attributes->merge(['class' => $inputclass.' '.$class]) }}
/>
@error($name)
<span class="mt-2 text-sm text-red-600">{{ $message }}</span>
@enderror

to use component

<x-input
   color="secondary"
   wire:model.lazy="email"
   type="email"
   name="email"
   placeholder="Email address"
   equired
/>