LiveComponents do not render flash messages, because they are concerned only with rendering themselves.

In order to send a flash message from a live component, you can send a message to the parent live view and send the flash message from there.

Hi,

since Elixir variables are immutable the put_flash/3 in your first example doesn’t change your socket, but returns a new socket which you have to use.

In the second example you have to remove the socket from the put_flash. The pipe (|>) calls the next function with the return value of the previous one as first parameter automatically.

Your
socket |> put_flash(socket, :error, "Error!") is the same as
put_flash(socket, socket, :error, "Error!"), but you only want it once inside the call.

You could use either:

def handle_event("click", %{"content" => params}, socket) do
  {:noreply, put_flash(socket, :error, "Error!")}
end

or

def handle_event("click", %{"content" => params}, socket) do
  # This reassigns socket to the value returned by put_flash
  socket = 
    socket
    |> put_flash(:error, "Error!")
  {:noreply, socket}
end

Hi @DOKL57, sorry but I don’t understand the solution at all. It’s too complicated. After pulling my beginner hairs out, I found the solution to be super simple!!!*.

You tried 2 methods in your original code. First:

^for this, the solution is simple. Do not return {:noreply, socket}. Instead, you should return {:noreply, put_flash(socket, :error, "Error!")}. Here’s a working example:

def handle_event("save", _, socket) do
    {:noreply, put_flash(socket, :error, "Error!")}
  end

For your second approach here:

^the solution is mentioned above by moogle19. You’re piping the socket into the put_flash() which means you’re actually writing put_flash(socket, socket, :error, “Error!”). Hence the error.

From moogle19’s explanation that “Elixir variables are immutable and the put_flash returns a new socket”, I looked again at what my function was returning and so found the solution to the bug in your first approach.