View components as Containers & Components in a React kind of way

[pinzonjulian]

Hey!

I've been playing with the idea of using View components as a way to prepare data for other components in a view, similar to how React uses Containers to prepare data for idempotent Components.

In the following example:

• ProdutsGridContainer has the responsibility of grabbing all the data using any means necessary (ActiveRecord for example).
• ProdutsGridContainer's test isn't focused on the actual HTML renderred
• CardComponent is idempotent
• CardComponent doesn't have the need to query any more data. It receives primitives such as strings, integers etc.
• CardComponent's tests are super light because they don't need any database access.

class ProductsController < ApplicationController
  def index
    @products = Product.with_attached_image # uses ActiveStorage to bring in the attachments
  end
end

<%= render ProdutsGridContainer.with_collection(@products) =>

class ProdutsGridContainer < ViewComponent::Base
  with_collection_parameter :product

  def initialize(product:)
    @product = product
  end

  def call
    render CardComponent.new(title: title, description: description, image: image_url)
  end

  private

  def title
    product.name
  end

  def description
    product.description
  end

  def image_url
    product.image.url # =>this is a call to a related model, not Product itself
  end
end

Have you encountered this need in your projects? How do you feel about this pattern in Rails?