Question 15916 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel components. How to check a props when it is not informed in the component

I’m trying to figure out how to do a check on the /props variable if it hasn’t been passed.

For example, in my component, I have some props to check true or false. If I don’t pass these props on to the component, it throws an error.

Can anyone tell me how to check this?

I will give an example below in code.

 <x-banner-introduction titleBefore="Blog" titleAfter="A voz do cliente" description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, velit?" btnText="Confira aqui" btnUrl="/" hasSearchField="true" hasLikeShare="" class="mb-12">
</x-banner-introduction>

<section {{ $attributes->merge(['class' => 'c-bannerIntroduction']) }}>
    <div class="container">
        @if($isCarousel)
            <p>é carrossel</p>
        @endif

        @if($titleAfter)
        <h1 class="nv-title nv-title--smile nv-title--big text-white mb-3 mb-md-4">
            <span>{{$titleBefore}}</span>
            <img src="{{asset('/images/icons/smile--white.svg')}}" alt="Ícone sorriso">
            <strong>{{$titleAfter}}</strong>
        </h1>

        @else
            <h1 class="nv-title nv-title--smile nv-title--big text-white mb-3 mb-md-4">
            <strong>{{$titleBefore}}</strong>
          </h1>
        @endif

        @if($description)
        <div class="row mb-7">
            <div class="col col-12 col-lg-5">
                <p class="nv-text--description text-white">
                    {{ $description ?? null }}
                </p>
            </div>
        </div>
        @endif
        
        @if($btnText)
        <a href="{{$btnUrl}}" class="nv-btn nv-btn--small">
            {{$btnText}}
        </a>
        @endif

        @if($hasSearchField === "true")
        <form class="c-bannerIntroduction__divSearch c-form mt-10">
            <div class="row">
                <div class="col">
                    <fieldset class="c-form__formGroup">
                        <label class="c-form__formGroup__label d-none d-md-block" for="inputSearch">O que deseja
                            encontrar?</label>

                        <input class="c-form__formGroup__input d-none d-md-block" type="search" id="inputSearch"
                            placeholder="Digite palavras chaves" minlength="3" maxlength="255" required>
                        <input class="c-form__formGroup__input d-block d-md-none" type="search" id="inputSearch"
                            placeholder="O que deseja encontrar?" minlength="3" maxlength="255" required>
                    </fieldset>
                </div>

                <div class="col col-auto">
                    <button class="c-form__submitBtn nv-btn nv-btn--search">
                        <span>Buscar</span>
                    </button>
                </div>
            </div>
        </form>
        @endif

        @if($hasLikeShare === 'true')
        <div class="c-bannerIntroduction__likesSharesInfo mt-6">
            <div class="row">
              <div class="col col-12 col-md-6 mb-2 mb-md-0">
                <div class="c-bannerIntroduction__likesSharesInfo__info">
                  <div class="row align-content-center">
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto pr-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/icons/heart--bgWhite--gray.svg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Ícone de coração">
                    </div>

                    <div class="col pl-2">
                      <div class="h-100 d-flex align-items-center">
                        <p class="c-bannerIntroduction__likesSharesInfo__info__text">
                          Amado e curtido por <strong>50 visitantes</strong>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col col-12 col-md-6">
                <div class="c-bannerIntroduction__likesSharesInfo__info">
                  <div class="row align-content-center">
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto pr-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/models/homem-branco-oculos-blusa-preta.jpeg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Imagem ilustrativa">
                    </div>
                    <div class="c-bannerIntroduction__likesSharesInfo__info__colImage col col-auto px-0">
                      <img src="{{asset('/images/icons/share--bgWhite--gray.svg')}}" class="c-bannerIntroduction__likesSharesInfo__info__colImage__illustrativePicture" alt="Ícone de coração">
                    </div>

                    <div class="col pl-2">
                      <div class="h-100 d-flex align-items-center">
                        <p class="c-bannerIntroduction__likesSharesInfo__info__text">
                          Amado e compartilhado por <strong>80 visitantes</strong>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        @endif
    </div>



    {{$slot}}
</section>


<?php

namespace AppViewComponents;

use IlluminateViewComponent;

class BannerIntroduction extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */

    public $isCarousel;
    public $titleBefore;
    public $titleAfter;
    public $description;
    public $btnText;
    public $btnUrl;
    public $hasSearchField;
    public $hasLikeShare;

    public function __construct($isCarousel, $titleBefore, $titleAfter, $description, $btnText, $btnUrl, $hasSearchField, $hasLikeShare)
    {
        $this->isCarousel = $isCarousel ? $isCarousel : 0;
        $this->titleBefore = $titleBefore;
        $this->titleAfter = $titleAfter;
        $this->description = $description;
        $this->btnText = $btnText;
        $this->btnUrl = $btnUrl;
        $this->hasSearchField = $hasSearchField;
        $this->hasLikeShare = $hasLikeShare;
    }

    /**
     * Get the view/contents that represent the component.
     *
     * @return IlluminateViewView|string
     */
    public function render()
    {
        return view('components.banner-introduction');
    }
}

In the example above, ‘Carousel’ is not passing, so it gives an error on the page.

Error:

IlluminateContractsContainerBindingResolutionException
Unresolvable dependency resolving [Parameter #0 [ <required> $isCarousel ]] in class AppViewComponentsBannerIntroduction (View: C:programminggitlabSmiles766-desafio-cxresourcesviewshome.blade.php)
Tags:

2

Answers


  1. 0

    Did you try using isset($prop)?

    For example:

    instead of

    @if($btnText)
    <a href="{{$btnUrl}}" class="nv-btn nv-btn--small">
       {{$btnText}}
    </a>
@endif

    You can try

    @if(isset($btnText))
    <a href="{{$btnUrl}}" class="nv-btn nv-btn--small">
        {{$btnText}}
    </a>
@endif
    Login or Signup to reply.
  2. 0

    You can just add the default value to 0 for the $isCarousel param so that even if you didn’t pass a value it will not throw an error. You also don’t have to add a condition.

    public function __construct($isCarousel = 0, ...)
{
    $this->isCarousel = $isCarousel;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search