Stateful components must have a single static HTML tag at the root

Phoenix Forum Questions / Help
,
1

Hello
I have trouble turning my stateless component into stateful one. From the current parent controller, I am injecting the live_component:

lib/maxi_web/live/survey_live.html.heex

<.live_component 
    module={MaxiWeb.DemographicLive.FormComponent}
    user={@current_user}
    id={"demographic-form-#{@current_user.id}"} />

Now, lets see what we have in that form component:

lib/maxi_web/live/demographic_live/form_component.html.heex

<div class="hero"> We are here <%= {@current_user.id} %> </div>


<.form let={f} phx_target={@myself} for={@changeset} phx-submit="save">
    <%= label f, :gender %>
    <%= select f, :gender, ["female", "male"] %>
    <%= error_tag f, :gender %>
    <%= label f, :year_of_birth %>
    <%= select f, :year_of_birth, Enum.reverse(1940..2020)%>
    <%= error_tag f, :year_of_birth %>
    <%= hidden_input f, :user_id %>
    <%= submit "Save", phx_disable_with: "Saving..." %>

</.form>

When I go to render the page, I get this error:

** ArgumentError at GET /survey

error on MaxiWeb.DemographicLive.FormComponent.render/1 with id of “demographic-form-1”. Stateful components must have a single static HTML tag at the root**

Can someone help me with this? Thanks

2

wrap the template contents in a container (such as a div) and you will be good to go

5 Likes
3

Thank you so much!

4

Is this an error in the docs? I tried these as-is but got this error until I wrapped the template in the LiveComponent in a div.

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html

5

Scroll down to Limitations

Live Components require a single HTML tag at the root. It is not possible to have components that render only text or multiple tags

1 Like