render with block in controller

[mhw]

The "Getting started" page in the guide says that this should work:

def show
  render(ExampleComponent.new(title: "My Title")) { "Hello, World!" }
end

but my experience is that the block is not passed through to the component and so content is nil in the component's template. I don't think this is due to an issue in ViewComponent either: from my reading of the code (rails/actionpack/lib/abstract_controller/rendering.rb), the render method in a Rails controller does not seem to expect a block. The render method includes &block in the signature but it seems to go nowhere.

This alternative should work:

def show
  render(ExampleComponent.new(title: "My Title").with_content("Hello, World!"))
end

but it gets a bit untidy with nested components, particularly as with_content doesn't seem to handle a ViewComponent being passed to it directly. You also can't use render more than once in a controller action, so we have:

render(
  TurboFrameComponent
    .new(@object)
    .with_content(render_to_string(ExampleComponent.new(title: @object.name)))
)

I noticed that ViewComponent provided render_component for Rails < 6.1, but that also didn't take a block. But I wonder if something like this would be possible:

render_component(TurboFrameComponent.new(@object)) do
  ExampleComponent.new(title: @object.name)
end

Is it worth fixing Rails' render to pass the block through and clean this up further?

[cpjmcquillan]

This might be a typo, have you tried this instead?

render(ExampleComponent.new(title: "My Title") { "Hello, World!" })

[mhw]

I have, but that doesn't work either: in that approach the block is being passed to ExampleComponent#initialize and there's no built in support for setting the content value from the initialiser. I don't think that's what was intended.

[yjukaku]

@mhw , did you ever come to a solution to this? I'm trying to do the same - render a ViewComponent from the controller using render_to_string, while passing in a content block to the ViewComponent.

[mhw]

Not a neat solution, no. I've gone with the .with_content(render_to_string(...)) approach that I mention above in the one place I render ViewComponents from a controller. I did intend to dig a bit more deeply and see if I could figure out a patch for Rails to fix it, but I've not had the time.

[yjukaku]

I'm going with with_content as well for now. It's surprising that the block is not respected, as it looks like it's meant to be handled based on the Rails code. 🤷‍♂️

Thanks for getting back to me 👍

[Thrizian]

I ran into this issue too, in your views, you should use content rather than yield. content is the method provided to output the block given to the component.

https://viewcomponent.org/api.html#content--string

class Bootstrap::AccordionComponent::ItemComponent < BootstrapComponent
  def initialize(parent: nil, header: "Default header", open: false, kontent: nil)
    @id = SecureRandom.hex(6).parameterize
    @open = !!open
    @parent = parent
    @header = header
    @content = kontent
  end

  def header_classes
    [initial_header_state]
  end

  def body_classes
    [initial_body_state]
  end

  def bs_parent
    "##{@parent}" if @parent
  end

  private

  def initial_header_state
    @open ? "" : "collapsed"
  end

  def initial_body_state
    @open ? "show" : ""
  end
end

.accordion-item
  .accordion-header
    %b.accordion-button{ type: "button",
                          class: header_classes,
                          data: { bs_toggle: "collapse",
                                  bs_target: "##{@id}",
                                  bs_parent: "##{@parent}" },
                          aria: { expanded: @open ? "true" : "false",
                          controls: @id } }
      = @header
  .accordion-collapse.collapse{ id: @id, class: body_classes, data: {bs_parent: bs_parent} }
    .accordion-body
      = @content
      = content

[joelhawksley]

The Getting Started guide has long since been updated to reflect that passing blocks to components does not work in controllers: https://viewcomponent.org/guide/getting-started.html#rendering-from-controllers.