Level 122
each component has its own state. You are expecting them to be bound together in some way?
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have this like-input-modal component
<div>
<label class="block text-sm text-primary-400 mb-1" wire:text="isLiked ? 'Liked' : 'Like'"></label>
<div class="relative flex items-center group">
<input type="hidden" name="is_liked" wire:model.live="isLiked"/>
<div
class="cursor-pointer relative"
wire:click="toggleLike"
wire:loading.class="opacity-50"
>
<x-icon-heart-outline
class="w-10 h-10 hover:text-primary-400 transition-colors {{ $isLiked ? 'fill-primary-500 text-primary-500' : 'fill-none text-primary-500' }}"
/>
<div wire:loading class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<svg class="animate-spin w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
</div>
</div>
I should be able to submit my form within review-modal
@php
$currentUserReview = auth()->user()?->getCurrentReviewFor($movie);
@endphp
<div>
<div class="flex flex-col mt-4 space-y-2">
<button
type="button"
x-on:click="$wire.showModal = true"
class="w-full bg-gray-800 text-primary-500 py-2 rounded-md hover:bg-gray-900
transition-colors"
>
Leave a Reel or Review
</button>
@if($currentUserReview)
<button
type="button"
x-on:click="$wire.showModal = true"
class="w-full bg-gray-800 text-primary-500 py-2 rounded-md hover:bg-gray-900
transition-colors"
>
Edit your Reel or review...
</button>
@endif
</div>
<!-- Modal backdrop -->
<div
class="fixed inset-0 bg-gray-800/30 backdrop-blur-lg z-50"
x-on:click="$wire.showModal = false"
wire:cloak
wire:transition
wire:show="showModal"
@keydown.escape.window="$wire.showModal = false"
>
<!-- Modal inner container -->
<div
class="fixed inset-0 flex items-center justify-center p-6"
@click.stop {{-- Prevent clicks inside from closing the modal --}}
>
{{-- Modal content --}}
<div class="bg-gray-950 rounded-lg shadow-xl max-w-3xl w-full p-6 relative">
{{-- Modal Header --}}
<div>
<div class="flex justify-between items-center border-b pb-4 mb-4 border-gray-500">
<h2 class="text-xl font-semibold text-primary-500">
Review {{ $movie->title }}
</h2>
<button
type="button"
x-on:click="$wire.showModal = false;confirm('Are you sure you want to cancel?');"
class="text-gray-400 hover:text-primary-500 absolute top-4 right-8"
>
<x-icon-close class="w-6 h-6"/>
</button>
</div>
</div>
{{-- Begin form --}}
<form
wire:submit="save"
>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li class="text-red-600 text-xs mt-2 mb-4">{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{{-- Watch --}}
<x-watch-date :movie="$movie"/>
{{-- Review Text --}}
<div class="mt-4">
<x-form-label for="review_content" value="Review">Review</x-form-label>
<x-form-textarea name="review_content" rows="10" class="w-full" wire:model="reviewContent"
/>
<x-form-error name="review_content"/>
<x-form-checkbox name="contains_spoilers">Contains Spoilers</x-form-checkbox>
</div>
{{-- Rating and Like Row --}}
<div class="flex items-center w-full justify-end space-x-10">
<livewire:rating-input-modal :movie="$movie"/>
<livewire:like-input-modal :movie="$movie"/>
</div>
{{-- Submit Button --}}
<div class="flex justify-end p-4 mt-6 border-t border-gray-500">
<x-form-submit-button>Save</x-form-submit-button>
</div>
</form>
</div>
</div>
</div>
</div>
But when I submit the form, it's sending it across as false. But DebugBar and the DOM tell me it's true, so why is it not properly dumping as true?
<?php
namespace App\Livewire;
use App\Models\Movie;
use Carbon\Carbon;
use Livewire\Component;
class ReviewModal extends Component
{
public $showModal = false;
public string $type = 'create';
public string $dateType = 'specific_date';
public string $watchDate;
public string $estimatedYear;
public bool $isRewatch = false;
public float $rating = 0.0;
public bool $isLiked = false;
public string $reviewContent = '';
public bool $containsSpoilers = false;
public Movie $movie;
public function mount(Movie $movie)
{
$this->movie = $movie;
$this->watchDate = Carbon::today()->format('Y-m-d');
}
public function save()
{
$validated = $this->validate([
'dateType' => 'required|in:specific_date,estimated_year,unknown',
'watchDate' => 'required_if:date_type,specific_date|date|nullable',
'estimatedYear' => 'required_if:date_type,estimated_year|integer|nullable',
'isRewatch' => 'nullable|boolean',
'rating' => 'nullable|numeric|min:0|max:5',
'isLiked' => 'nullable|boolean',
'reviewContent' => 'nullable|string',
'containsSpoilers' => 'nullable|boolean',
]);
dd($validated);
$this->showModal = false; // Close the modal after saving
return redirect()
->route('movies.show', $movie)
->with('success', 'Movie added to your reel successfully');
}
public function render()
{
return view('livewire.review-modal');
}
}
<?php
namespace App\Livewire;
use App\Models\Movie;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;
class LikeInputModal extends Component
{
public Movie $movie;
#[Validate('required|boolean')]
public bool $isLiked;
// Helpers
#[On('movie-liked')]
public function setLikeStatus(bool $isLiked): void
{
$this->isLiked = $isLiked;
}
// End Helpers
public function mount(Movie $movie): void
{
$this->movie = $movie;
$this->isLiked = $this->movie->isLiked();
}
public function toggleLike(): void
{
$this->validate();
// Toggle the state
$this->isLiked = !$this->isLiked;
}
public function render()
{
return view('livewire.like-input-modal');
}
}
Please or to participate in this conversation.