Attempt to read property "investment_id" on array

Question

I know there are many similar questions, unfortunately I can't find suitable solution for my case. I want to show list of data on modal using Laravel Livewire when clicking on a link from another list. But, because of Livewire can't set public variables to Eloquent or Query Builder instance, so I use array to retrieve the list, in this case I use select() method since it returns array. Then, the list indeed displayed correctly but after a few seconds, an error saying Attempt to read property "investment_id" on array is prompted. Is there any solution regarding this issue? Thanks.

investment-modal.blade.php

@if ($investmentModalClicked == true)
<div id="investment-modal" wire:ignore.self class="modal fade">
    ....
    ....
    <table class="table table-sm table-striped">
        <thead>
            <th style="width: 5%;" scope="col">No.</th>
            <th style="width: 25%;" scope="col">Investment ID</th>
            <th style="width: 50%;" scope="col">Initial Investment</th>
            <th style="width: 20%;" scope="col">Status</th>
        </thead>
        <tbody>
            @foreach ($investmentList as $key => $item)
                <tr>
                    <th scope="row">{{ $key+1 }}</th>
                    <td>{{ $item->investment_id }}</td>
                    <td>USD {{ $item->initial_investment }}</td>
                    <td>{{ $item->status }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

investment-list.blade.php

<div>
<table class="table table-sm table-striped">
    <thead>
        <th style="width: 5%;" scope="col">No.</th>
        <th style="width: 15%;" scope="col">Name</th>
        ...
        ...
    <tbody>
        @foreach ($users as $key => $user)
            <tr>
                <th scope="row">{{ ($currentPage-1) * $rowPerPage + $key + 1 }}</th>
                <td><a class="link-primary" href wire:click.prevent="showInvestmentModal({{ $user->id}})">{{ $user->name}}</a></td>
                ...
                ...
            </tr>
        @endforeach
    </tbody>
</table>
</div>

InvestmentList.php

class InvestmentList extends Component
{
    public $currentPage = 1;
    public $investmentList;
    public $investmentModalClicked = false;

    public function render()
    {
        return view('livewire.partnership', [
            'users' => $this->retrieveUserList(),
            'rowPerPage' => 20
        ]);
    }

    public function retrieveUserList()
    {
        //returns array
    }

    public function showInvestmentModal($userId) 
    {
        $this->investmentPopupClicked = true;

        $this->investmentList = DB::select('select id, date, investment_id, initial_investment, status '
            . 'from investment_data '
            . 'where user_id = ? '
            . "and (status = 'ACTIVE' or status = 'INACTIVE')"
            . 'order by status asc', [$userId]);

        $this->emit('showInvestmentModal');
    }
}

var dump result of $investmentList

array:6 [▼
  0 => {#652 ▼
    +"id": 55
    +"date": "2021-12-02 18:48:52"
    +"investment_id": "31733685"
    +"initial_investment": "400.00"
    +"status": "ACTIVE"
  }
  1 => {#647 ▼
    +"id": 54
    +"date": "2021-12-02 18:48:50"
    +"investment_id": "31735260"
    +"initial_investment": "2400.00"
    +"status": "ACTIVE"
  }
  2 => {#646 ▼
    +"id": 53
    +"date": "2021-12-02 18:48:48"
    +"investment_id": "31733712"
    +"initial_investment": "3400.00"
    +"status": "ACTIVE"
  }
  3 => {#645 ▼
    +"id": 52
    +"date": "2021-12-02 18:48:45"
    +"investment_id": "31734980"
    +"initial_investment": "3000.00"
    +"status": "ACTIVE"
  }
  4 => {#644 ▼
    +"id": 51
    +"date": "2021-12-02 18:48:36"
    +"investment_id": "31733654"
    +"initial_investment": "12000.00"
    +"status": "ACTIVE"
  }
  5 => {#643 ▼
    +"id": 56
    +"date": "2021-11-30 13:39:45"
    +"investment_id": "31728693"
    +"initial_investment": "21.00"
    +"status": "ACTIVE"
  }
]

Answer 1

Finally, I figured it out myself by passing the $investmentList via render method, and that error after a few seconds is not prompted anymore. And yes, it doesn't need to be casted to array nor transformed into collection.

public $userId;

public function render()
{
    return view('livewire.investment-list', [
        'users' => $this->retrieveUserList(),
        'rowPerPage' => 20,
        'investmentList' => $this->getInvestmentList()
    ]);
}

public function showInvestmentModal($userId) 
{
    $this->investmentPopupClicked = true;
    $this->userId= $userId;
    $this->emit('showInvestmentModal');
}

public function getInvestmentList()
{
    return DB::select('select id, date, investment_id, initial_investment, status '
        . 'from investment_data '
        . 'where user_id = ? '
        . "and (status = 'ACTIVE' or status = 'INACTIVE')"
        . 'order by status asc', [$this->userId]);
}