title: Unable to pass an array of selected data from parent component with traits to the nested component
body: <h3>Application Structure</h3>
  <ul>
  <li>App/Http/Livewire</li>
  </ul>
  <ol>
  <li>UserController - Livewire/UserManagement/UserController</li>
  <li>WithBulkActions - Livewire/Traits/DataTable/WithBulkActions</li>
  </ol>
  <ul>
  <li>resources/views/livewire</li>
  </ul>
  <ol>
  <li>UserController Blade - livewire/user-management/user-controller</li>
  </ol>
  <h3>Description</h3>
  <p>I am creating a CRUD system, with bulk actions to delete the selected data. I have extracted the logic which is responsible to select multiple items or to select all items in the current data table i.e UserController, so I can use it as a trait i.e. WithBulkActions, in other data table components. The trait is only responsible to select multiple items or to select all items from the data table. The public function method to delete an array of data, is present in the data table component controller itself i.e. UserController. Now, to make the multiple select with bulk actions work, I have to include the confirmation modal, which is responsible to fire the method to delete an array of data, in the data table component blade view i.e. UserController Blade. It works perfectly when I include the confirmation modal to delete the selected data inside the user controller. While each row has a checkbox modeled to <code>wire:model=&quot;selected&quot;</code> with the <code>value=&quot;{{ $user-&gt;id }}&quot;</code> within the foreach loop. The public variable <code>selected</code> is initialized as <code>public $selected = [];</code> within the trait, WithBulkActions and then the trait is being used in the component, UserController.</p>
  <p><code>rowsQuery</code> property within the UserController component gets the data from the User model in a query with the filters, sorting and return it as a property.</p>
  <pre><code>public function getRowsQueryProperty()
      {
          $query = User::query()
              -&gt;when($this-&gt;filters['email'], fn($query, $email) =&gt; $query-&gt;where('email', 'like', '%'.$email.'%'))
              -&gt;when($this-&gt;filters['role'], fn($query, $role) =&gt; $query-&gt;whereHas('roles', fn ($query) =&gt; $query-&gt;where('id', $role)))
              -&gt;when($this-&gt;filters['search'], fn($query, $search) =&gt; $query-&gt;where('name', 'like', '%'.$search.'%'))
              -&gt;when($this-&gt;filters['date-min'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&gt;=', Carbon::createFromFormat('d/m/Y', $created_at)))
              -&gt;when($this-&gt;filters['date-max'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&lt;=', Carbon::createFromFormat('d/m/Y', $created_at)));
          
          return $this-&gt;applySorting($query);
      }
  </code></pre>
  <p>Then the <code>rowsQuery</code> is cloned in the <code>selectedRowsQuery</code> property within the trait, WithBulkActions.</p>
  <pre><code>public function getSelectedRowsQueryProperty()
      {
          return (clone $this-&gt;rowsQuery)
              -&gt;unless($this-&gt;selectAll, fn($query) =&gt; $query-&gt;whereKey($this-&gt;selected));
      }
  </code></pre>
  <p>If incase an array of data is being selected and the selected data should be deleted, the <code>public function confirmDeleteBulk()</code> is responsible for it, which is in UserController component, the following public function calls for <code>selectedRowsQuery</code> property, which is initialized in the trait itself, and then it executes the delete() method and notify accordingly.</p>
  <pre><code>public function confirmDeleteBulk()
      {
          $deleteCount = $this-&gt;selectedRowsQuery-&gt;count();
          foreach ($this-&gt;selectedRowsQuery-&gt;get() as $queryRow) {
              $queryRow-&gt;roles()-&gt;detach();
          }
          $this-&gt;selectedRowsQuery-&gt;delete();
          $this-&gt;showUserBulkDeletionModal = false;
          $this-&gt;notify('You\'ve deleted '.$deleteCount.' users');
      }
  </code></pre>
  <p>I tried making a separate livewire component with public function method to delete the selected data by displaying a confirmation modal but I was unable to pass the selected number of rows to the UserBulkDeletion nested component located at, Livewire/UserManagement/LogicalComponent/UserBulkDeletion. Please tell me the best use case in this situation, incase if what I want is possible. Help will be really appreciated, as I'm trying to do this since 2 weeks now.</p>
  <p><strong>Context</strong></p>
  <ul>
  <li>Livewire version: 2.3.8</li>
  <li>Laravel version: 8.24.0</li>
  <li>Alpine version: 2.8.0</li>
  <li>Browser: Chrome</li>
  </ul>
  <h3>Edit</h3>
  <ul>
  <li>Livewire/UserManagement/UserController</li>
  </ul>
  <pre><code>class UserController extends Component
  {
      use WithCachedRows, WithSorting, WithBulkActions, WithPerPagePagination;
  
      public User $user;
      public $showFilters = false;
      public $filters = [
          'search' =&gt; &quot;&quot;,
          'email' =&gt; null,
          'role' =&gt; '',
          'date-min' =&gt; null,
          'date-max' =&gt; null,
      ];
  
      protected $listeners = ['sectionRefresh' =&gt; '$refresh'];
  
      public function toggleShowFilters()
      {
          $this-&gt;useCachedRows();
  
          $this-&gt;showFilters = ! $this-&gt;showFilters;
      }
  
      public function resetFilters() 
      {
          $this-&gt;reset('filters'); 
      }
  
      public function updatedFilters() 
      {
          $this-&gt;resetPage();
      }
      
      public function getRowsQueryProperty()
      {
          $query = User::query()
              -&gt;when($this-&gt;filters['email'], fn($query, $email) =&gt; $query-&gt;where('email', 'like', '%'.$email.'%'))
              -&gt;when($this-&gt;filters['role'], fn($query, $role) =&gt; $query-&gt;whereHas('roles', fn ($query) =&gt; $query-&gt;where('id', $role)))
              -&gt;when($this-&gt;filters['search'], fn($query, $search) =&gt; $query-&gt;where('name', 'like', '%'.$search.'%'))
              -&gt;when($this-&gt;filters['date-min'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&gt;=', Carbon::createFromFormat('d/m/Y', $created_at)))
              -&gt;when($this-&gt;filters['date-max'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&lt;=', Carbon::createFromFormat('d/m/Y', $created_at)));
          
          return $this-&gt;applySorting($query);
      }
  
      public function getRowsProperty()
      {
          return $this-&gt;cache(function () {
              return $this-&gt;applyPagination($this-&gt;rowsQuery);
          });
      }
  
      public function getRolesProperty()
      {
          $roles = Role::all();
          return $roles;
      }
      
      public function render()
      {
          return view('livewire.backend.management.audience-management.user-controller', ['users' =&gt; $this-&gt;rows, 'roles' =&gt; $this-&gt;roles]);
      }
  }
  </code></pre>
  <ul>
  <li>Livewire/UserManagement/LogicalComponent/UserBulkDeletion</li>
  </ul>
  <pre><code>class UserBulkDeletion extends Component
  {
      use WithCachedRows, WithBulkActions, WithSorting;
      
      public $showUserBulkDeletionModal = false;
      public User $user;
      public $filters = [
          'search' =&gt; &quot;&quot;,
          'email' =&gt; null,
          'role' =&gt; '',
          'date-min' =&gt; null,
          'date-max' =&gt; null,
      ];
  
      protected $listeners = ['deleteUserBulk'];
  
      public function deleteUserBulk()
      {
          $this-&gt;useCachedRows();
  
          $this-&gt;showUserBulkDeletionModal = true;
      }
  
      public function confirmDeleteBulk()
      {
          $deleteCount = $this-&gt;selectedRowsQuery-&gt;count();
          
          foreach ($this-&gt;selectedRowsQuery-&gt;get() as $queryRow) {
              $queryRow-&gt;roles()-&gt;detach();
          }
  
          $this-&gt;selectedRowsQuery-&gt;delete();
          $this-&gt;showUserBulkDeletionModal = false;
  
          $this-&gt;notify('You\'ve deleted '.$deleteCount.' users');
          $this-&gt;emit('sectionRefresh');
      }
  
      public function getRowsQueryProperty()
      {
          $query = User::query()
              -&gt;when($this-&gt;filters['email'], fn($query, $email) =&gt; $query-&gt;where('email', 'like', '%'.$email.'%'))
              -&gt;when($this-&gt;filters['role'], fn($query, $role) =&gt; $query-&gt;whereHas('roles', fn ($query) =&gt; $query-&gt;where('id', $role)))
              -&gt;when($this-&gt;filters['search'], fn($query, $search) =&gt; $query-&gt;where('name', 'like', '%'.$search.'%'))
              -&gt;when($this-&gt;filters['date-min'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&gt;=', Carbon::createFromFormat('d/m/Y', $created_at)))
              -&gt;when($this-&gt;filters['date-max'], fn($query, $created_at) =&gt; $query-&gt;where('created_at', '&lt;=', Carbon::createFromFormat('d/m/Y', $created_at)));
          
          return $this-&gt;applySorting($query);
      }
  
      public function render()
      {
          return view('livewire.backend.management.audience-management.logical-component.user-bulk-deletion');
      }
  }
  </code></pre>
  <ul>
  <li>Livewire/Traits/DataTable/WithBulkActions</li>
  </ul>
  <pre><code>trait WithBulkActions
  {
      public $selectPage = false;
      public $selectAll = false;
      public $selected = [];
  
      public function renderingWithBulkActions()
      {
          if ($this-&gt;selectAll) $this-&gt;selectPageRows();
      }
  
      public function updatedSelected()
      {
          $this-&gt;selectAll = false;
          $this-&gt;selectPage = false;
      }
  
      public function updatedSelectPage($value)
      {
          if ($value) return $this-&gt;selectPageRows();
  
          $this-&gt;selectAll = false;
          $this-&gt;selected = [];
      }
  
      public function selectPageRows()
      {
          $this-&gt;selected = $this-&gt;rows-&gt;pluck('id')-&gt;map(fn($id) =&gt; (string) $id);
      }
  
      public function selectAll()
      {
          $this-&gt;selectAll = true;
      }
  
      public function getSelectedRowsQueryProperty()
      {
          return (clone $this-&gt;rowsQuery)
              -&gt;unless($this-&gt;selectAll, fn($query) =&gt; $query-&gt;whereKey($this-&gt;selected));
      }
  }
  </code></pre>
  <ul>
  <li>views/livewire/user-management/logical-component/user-bulk-deletion</li>
  </ul>
  <pre><code>&lt;div&gt;
      &lt;form wire:submit.prevent=&quot;confirmDeleteBulk&quot;&gt;
          &lt;x-modal.confirmation wire:model.defer=&quot;showUserBulkDeletionModal&quot;&gt;
              &lt;x-slot name=&quot;title&quot;&gt;Delete User&lt;/x-slot&gt;
  
              &lt;x-slot name=&quot;content&quot;&gt;
                  @json($selected)
                  Are you sure you want to delete users? This action is irreversible!
              &lt;/x-slot&gt;
  
              &lt;x-slot name=&quot;footer&quot;&gt;
                  &lt;x-button.secondary wire:click=&quot;$set('showUserBulkDeletionModal', false)&quot;&gt;Cancel&lt;/x-button.primary&gt;
  
                  &lt;x-button.primary type=&quot;submit&quot;&gt;Delete&lt;/x-button.primary&gt;
              &lt;/x-slot&gt;
          &lt;/x-modal.confirmation&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>