Phoenix LiveView and LiveComponent assign always empty map

Phoenix Forum Questions / Help
, ,
1

I am trying to build a normal CRUD application using Phoenix.LiveView, Here I am facing an issue in passing or setting a Value is ASSIGN or IN SOCKET.

I have a LiveView code

Index.ex

defmodule Example.Index do
	use Phoenix.LiveView

	@default_state %{
		is_editing?: false,
		user_id: nil,
	}

	def render(assign) do
		ExampleWeb.render("index.html", assign)
	end

	def mount(_params, _session, socket) do
		users = Example.get_users()
		{:ok, assign(socket, %{@default_state | users: users})}
	end

	def handle_event("edit-user", %{"user-id" => user_id}, socket) do
		new_socket =
			socket
			|> assign(:user_id, user_id)

		{:noreply,
			live_redirect(new_socket,
			to: ExampleWeb.Router.Helpers.users_edit_path(new_socket, __MODULE__, user_id),
			replace: false
		)}
	end
end

Template file

<div class="card">
  <%= if @is_editing? do %>
    <%= live_component(@socket, ExampleWeb.Users.EditFormComponent, id: :edit_user) %>
  <%= end %>
  <%= if @is_editing? != true do %>
    <div class="card-header">
      <strong>Users</strong>
      <a class="btn btn-sm btn-success ml-3 pull-right" phx-click="new">
        <i class="fa fa-plus mr-1"></i> Create
      </a>
    </div>
   <%= end %>
</div

here is my component.ex code

defmodule ExampleWeb.Users.EditFormComponent do
	use Phoenix.LiveComponent

	def render(assigns) do
		UserView.render("update.html", assigns)
	end
	
	def mount(socket) do
		{:ok, assign(socket, changeset: User.changeset(%User{}))}
	end
end

the problem is here I am not able to get the user-id which is set/update in LiveView file and also not able to access the PARAMS component level.

Can somebody suggest or provide a solution for this??

2

You’re not passing the user_id to your component:

    <%= live_component(@socket, ExampleWeb.Users.EditFormComponent, id: :edit_user) %>
3

actually, the problem was with the page Refresh, it was keep updating the assigns to default.

4

You also may need to make use of update Phoenix.LiveComponent — Phoenix LiveView v0.20.2 to actually assign the passed in value to the live component.

What do you mean?

5

I have tried, using update and preload as well, but still, the value inside the assigns is nil, this happens after the page refresh.

What I am trying to achieve is:

LiveView -
list of users
EditUserComponent - I set the user-id in assigns
When the view changes - to edit user for the first time I get user-id this is fine, but when I refresh the page on this componentView the user-id becomes nil.

I want the user-id in LiveComponent always - bcoz based on the user-id I fetch the user details to pre-populate values.

I think this issue occurs bcoz of URL change -
USER list - /users
EDIT. - /users/1/edit

this might be the problem, I don’t know how to handle this.

6

can you show more complete code for both views and the component?