renders_many - Is there anyway to tell whether a single child or an array of children are to be rendered?

[brandoncordell]

Given that I have a basic component that looks like this

class DropdownComponent < ViewComponent::Base
  renders_many :items, lambda { |name: nil|
    ItemComponent.new(name: name)
  }
end

I can use either of the following

<%= render DropdownComponent.new do |c| %>
  # I can render a single child
  <% c.item(name: 'single child') %>

  # or I can render a collection of children
  <% c.items([{ name: 'child one' }, { name: 'child two' }]) %>
<% end %>

I want to wrap Items in a <div> but only if it's passed as a collection. So It would essentially render like.

<% c.item(name: 'single child') %> # Item<single child>
<% c.items([{ name: 'child one' }, { name: 'child two' }]) %> # <div>Item<child one> Item<child two></div>

Is there anyway to do this? Is there a better way to architect this that I'm not seeing?

[boardfish]

Haven't tested this, but I think it might work.

In your component template:

<% if items.one? %>
  <%= items.compact.first %>
<% else %>
  <% items.each do |item| %>
    <div><%= item %></div>
  <% end %>
<% end %>

[boardfish]

Ah, I see. I misunderstood your original question — I thought that you would either call the singular name once or call the plural and pass things in.

We can still apply this concept, though — if you take my previous answer and use it to create a DropdownGroupComponent that renders one or more ItemComponents, you can then have a parent NavComponent that renders multiple DropdownGroupComponents from the data you pass in.

I'll outline the solution in more detail tomorrow - posting from my phone at the moment.

[boardfish]

Here's an example repo, but the gist is:

• The Nav component has a slot for Nav::DropdownGroups
• Nav::DropdownGroups render a single Nav::Item, or multiple Nav::Items enclosed within a div using the solution I previously mentioned

The fact that the slot for Nav::DropdownGroups is a renders_many slot that we call like this:

<%= render Nav.new do |c| %>
  <%= c.sections([
      { items: { name: 'single child' } },
      { items: [{ name: 'child one' }, { name: 'child two' }] }
    ]) %>
<% end %>

...means that we can achieve what you originally intended - multiple groups that are only wrapped within an enclosing div if there are multiple:

<div>
  <div class="nav-item">single child</div>
  <div class="nav-group">
    <div class="nav-item">child one</div>
    <div class="nav-item">child two</div>
  </div>
</div>

[boardfish]

I should add that there are probably more intuitive ways to name and structure this than what I've suggested - in particular, note that DropdownGroups also fall back to a single Item, so maybe there's a way to convey that. But hopefully this is what you're after.

[brandoncordell]

Thank you @boardfish! This got me exactly where I wanted to be. For some reason I can't seem to mark your comment as the solution in Firefox or Chrome on Ubuntu... I'll do that from my laptop later.

[boardfish]

That's okay - I'm able to do it myself. I figure that's what you wanted.