having trouble in displaying the data passed to components in laravel-CodePudding

I'm trying to learn laravel and now I'm in the part of passing the Data to components but everytime I run this code nothing Displays

in my welcome.blade.php:

<x-header name =  "Joanna"/>

in my Header.php:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

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

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

in my header.blade.php:

<div>
    <h1>Hi {{ $name }}</h1>
</div>

I hope you can help me I'm stuck in this for hours...thank you

CodePudding user response：

Your blade component doesn't seem right. Try removing the spaces on the HTML attribute like:

<x-header name="Joanna" />

CodePudding user response：

Your problem may be as simple as adding a colon behind your variable you're trying to assign as shown in the docs:

<x-header :name="Joanna"/>

PHP expressions and variables should be passed to the component via attributes that use the : character as a prefix: