Rendering in a turbo stream

[coder2000]

I know this has been tackled a bit before but I am getting something interesting. So I am trying to render a component as part of a partial like so:

activities = turbo_stream.append("activity_list", partial: "activity", locals: {activity: activity})

<%= render List::Activity::Item.new(transaction: activity.transaction, type: "Adjustment", date: activity.created_at, kind: activity.kind) %>

but I keep getting an error no block given (yield) when I do. I also tried using render_in and passing the result directly to the append method but got the same error.

Here is the component as well:

class List::Activity::Item < ApplicationComponent
  delegate :local_time_ago, to: :helpers

  option :transaction
  option :type, proc(&:to_s)
  option :date
  option :kind

  def icon_name
    case type
    when "Sale"
      "receipt"
    when "Order"
      "cart-shopping"
    when "Adjustment"
      "arrow-down-arrow-up"
    end
  end

  def icon_color
    case kind
    when "credit"
      "bg-emerald-400"
    when "debit"
      "bg-rose-400"
    end
  end

  def message
    case type
    when "Sale"
      "#{transaction.user.name} sold #{transaction.product.name}"
    when "Order"
      "#{transaction.user.name} placed an order"
    when "Adjustment"
      "#{transaction.admin.name} adjusted #{transaction.user.name}'s account by #{transaction.points}"
    end
  end
end

<li class="group">
  <div class="relative pb-8">
    <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200 group-last:hidden" aria-hidden="true"></span>
    <div class="relative flex space-x-3">
      <div>
        <span class="flex items-center justify-center w-8 h-8 <%= icon_color %> rounded-full ring-8 ring-white">
          <%= icon(name: icon_name, class: "h-5 w-5 text-white") %>
        </span>
      </div>
      <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
        <div>
          <p class="text-sm text-gray-500"><%= message %></p>
        </div>
        <div class="text-sm text-right text-gray-500 whitespace-nowrap">
          <%= local_time_ago(date) %>
        </div>
      </div>
    </div>
  </div>
</li>

[coder2000]

I ended up getting it working, I think I was passing the wrong value to one of the component options.