Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

the_lar's avatar

Modifying State in UpdateUserProfile Livewire

Hi, I've got a piece of state in my UpdateProfileInformationForm component which is a new field I've set up for Date of birth. This is standard date in the format Y-m-d, the name of this is date_of_birth. The issue I have is that in my View the Day/Month/Year are separate fields. So accessing state.date_of_birth is no good to me. Here is my Month field for example from my update-profile-information-form.blade.php:

<div class="inline-block">
                    <x-jet-label class="text-xs" for="dob-month" value="{{ __('Month') }}" />
                    <x-jet-input id="dob-month" type="number" class="mt-1 block w-[3.5rem] text-center" wire:model.defer="state.date_of_birth_month" autocomplete="dob-month" placeholder="MM" pattern="[0-9]+" maxlength="2" oninput="this.value = window.isNum(this.value, 12) ;" />
                </div>

Obviously this doesn't work because state.date_of_birth_month doesn't exist currently - but how do I split date_of_birth into 3 parts in order to get it into the view - which files do I need to modify?

0 likes
6 replies
Snapey's avatar

you need state for each of the elements, then when any changes, update the date_of_birth

the_lar's avatar

I've managed to do this I think, here's how...

First I created a new livewire component docker-compose run --rm artisan make:livewire UpdateProfile which created 2 new files:

CLASS: app/Http/Livewire/UpdateProfile.php
VIEW:  resources/views/livewire/update-profile.blade.php

Then in resources/views/profile/show.blade.php I changed @livewire('profile.update-profile-information-form') to @livewire('update-profile') on line 11.

I then copied the contents of resources/views/profile/update-profile-information-form.php and pasted into resources/views/livewire/update-profile.blade.php

Finally I edited app/Http/Livewire/UpdateProfile.php with the following:

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Auth;
use Laravel\Jetstream\Http\Livewire\UpdateProfileInformationForm;
use Livewire\Component;

class UpdateProfile extends UpdateProfileInformationForm
{
    public function mount()
    {
        $this->state = Auth::user()->withoutRelations()->toArray();
        if(!is_null($this->state['date_of_birth'])){
            $dob = explode('-', $this->state['date_of_birth']);
            $this->state['date_of_birth_day'] = $dob[2];
            $this->state['date_of_birth_month'] = $dob[1];
            $this->state['date_of_birth_year'] = $dob[0];
        }
    }

    public function render()
    {
        return view('livewire.update-profile');
    }
}

This seems to work OK - basically I've created a new Livewire component with it's own controller that just extends the original and in the mount function it expodes the full dob and writes seperate items into state.

Is this there an easier way I could have achieved the same thing?

Snapey's avatar

written the same code in the original component?

the_lar's avatar

@snapey so given the original component is views/livewire/profile/update-profile-information-form.php and its controller is vendor/laravel/jetstrem/src/Http/Livewire/UpdateProfileInformationForm.php - how would I just make the original component use a different (new) controller which extends the original?

Snapey's avatar
Snapey
Best Answer
Level 122

You should be able to duplicate the original component to your own component and then in FortifyServiceProvider, swap the implementation

        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);

But extending might work also.

the_lar's avatar

@Snapey Ah ha... there's the missing bit of glue!! That's what I needed to get this all hooked up... understand now! Thank youi!

Please or to participate in this conversation.