Pass unspecified assigns Map to LiveComponent with LiveView 0.17.2

Questions & Help Questions
, ,
1

I updated a project to the latest Phoenix LiveView 0.17.2 and can’t figure out how to pass assigns to a LiveComponent. I guess I need some kind of “spread operator” here, but don’t know the proper syntax.

Previous code:

<%= live_component @socket, Web.MyModule, Map.merge(assigns, %{id: "my-component-id"}) %>

My attempts:

# Sets an `assigns` assign on the `assigns` of the LiveComponent (got it? :D)
# So, in the LiveComponent I have now `assigns.assigns.my_var` instead of 
# having @my_var or assigns.my_var
<.live_component module={Web.AddressChangeLive.ChangeComponent}, id="change-component", assigns />

# In this case, `module` and `id` are `nil`
<.live_component Map.merge(assigns, %{module={Web.AddressChangeLive.ChangeComponent}, id="change-component"}) />

Could you hep me further, please?

2

You have to remove the , in your <.live_component /> tag (just like in normal html) and you can give the assigns as last argument, e.g.:

<.live_component module={Web.AddressChangeLive.ChangeComponent} id="change-component" {assigns} />

Edit: Take a look at Cost of stateful components in the documentation

3

Hi,
you should try something like :

<.live_component module={Web.MyModule} id="your_id" {assigns} />

But generally, you should pass to your components only the data it uses (not all the assigns map)
Also note that the commas are removed (normal HTML attributes)

Cheers,
Sébastien.

4

Ah yes! The comma was the problem! I’d like to accept both answers but since I can select only one I will choose the earliest :man_shrugging:t2: Thank you both though!

5

Then I won’t edit my post to add a link to the documentation next time. :joy:

6

Nooo! I was confused since your post was at the top, but the timestamp was later and I was on the phone and just thought maybe it’s a problem with a spotty connection :man_shrugging:t2:I accepted your answer now :hugs: