Using live component blocks

Phoenix Forum Questions / Help
,
1

Hi all,

According to the documentation Live components can accept blocks, however, I’m having trouble with it. Here is what I’m trying to do:

# component:
def render(assigns) do
    ~L"""
    <div>
        <%= render_block(@inner_block) %>
    </div>
    """
  end
# live view:
<%= form_for @changeset, Routes.user_registration_path(@socket, :create), fn f -> %>
   <%= live_component(@socket, FormsEntryComponent) do %>
      <p>Foo</p>
   <% end %>
...
<% end %>

But I’m getting the following error: cannot convert component SleeprescueWeb.FormsEntryComponent with id nil to HTML.. I’ve also tried passing id into the live component in which case the error changes to cannot convert ... with id "foo" to HTML.. Interestingly, in the logs I’ve also been getting a warning warning: variable "assigns" is unused when I try to use this component, so something is clearly amiss.

Importantly, I’d like to note that this works outside a form_for block but fails inside it. Any suggestions for how to deal with this?

Would anyone happen to know how I could get this working?

Many thanks!

2

is your component stateful?

If so, you are missing the unique id for the component

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-stateful-components-life-cycle

3

Hey, thanks for looking into this. I wouldn’t have thought that it should be stateful since it does not change with state, but I think that it might be. Either way, I’ve tried adding an ID to the div of my component which I passed from the live view, but that didn’t help either. I’m still getting the same old cannot convert component... with ID ... to HTML

4

The issue is that you can’t use components inside form_for (or inside content_tag and so on). Instead convert

<%= form_for .., fn f -> %>

<% end %>

into

<%= f = form_for ... %>

</form>

And you should be good to go. This is something we are working on solving. :slight_smile:

7 Likes
5

Awesome, thank you, Jose!