Collections

Like Rails partials, it’s possible to render a collection with ViewComponents, using with_collection:

<%# app/view/products/index.html.erb %>
<%= render(ProductComponent.with_collection(@products)) %>

# app/components/product_component.rb
class ProductComponent < ViewComponent::Base
  def initialize(product:)
    @product = product
  end
end

By default, the component name is used to define the parameter passed into the component from the collection.

`with_collection_parameter`

Use with_collection_parameter to change the name of the collection parameter:

# app/components/product_component.rb
class ProductComponent < ViewComponent::Base
  with_collection_parameter :item

  def initialize(item:)
    @item = item
  end
end

Additional arguments

Additional arguments besides the collection are passed to each component instance:

<%# app/view/products/index.html.erb %>
<%= render(ProductComponent.with_collection(@products, notice: "hi")) %>

# app/components/product_component.rb
class ProductComponent < ViewComponent::Base
  with_collection_parameter :item

  def initialize(item:, notice:)
    @item = item
    @notice = notice
  end
end

<%# app/components/product_component.html.erb %>
<li>
  <h2><%= @item.name %></h2>
  <span><%= @notice %></span>
</li>

Collection counter

ViewComponent defines a counter variable matching the parameter name above, followed by _counter. To access the variable, add it to initialize as an argument:

# app/components/product_component.rb
class ProductComponent < ViewComponent::Base
  def initialize(product:, product_counter:)
    @product = product
    @counter = product_counter
  end
end

<%# app/components/product_component.html.erb %>
<li>
  <%= @counter %> <%= @product.name %>
</li>

Collection iteration

ViewComponent defines a counter variable matching the parameter name above, followed by _iteration. To access the variable, add it to initialize as an argument:

# app/components/product_component.rb
class ProductComponent < ViewComponent::Base
  def initialize(product:, product_iteration:)
    @product = product
    @iteration = product_iteration
  end
end

<%# app/components/product_component.html.erb %>
<li class="<%= "featured" if @iteration.first? %>">
  <%= @product.name %>
</li>