Call Phoenix.View.render from a live component (old project)

Phoenix Forum Questions / Help
1

I was following a bit outdated tutorial where there was the following call to Phoenix.View/render/4 function in a live component:

defmodule PhoenixCmsWeb.ArticlesLive do
  use PhoenixCmsWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign_socket(socket)}
  end

  def render_article(socket, %{id: _id, slug: _slug} = article) do
    Phoenix.View.render(PhoenixCmsWeb.PageView, "article.html", socket: socket, article: article)
  end
...
end

The render_article/2 function is called from a live template articles_live.html.heex` as follows:

<section class="section">
<div class="columns is-variable is-multiline is-mobile is-8">
  <%= for article <- @articles, do: render_article(@socket, article) %>
</div>

I can’t find any docs explaining how to use/not use Phoenix.View in a live component or what use instead and getting the error:

 module Phoenix.View is not loaded and could not be found

Thank you.

2

You’d replace that with an article function component:

<PhoenixCmsWeb.PageView.article :for={article <- @articles} socket={@socket} article={article} />
3

OK, thanks a lot. So I’ll have just to define a new function article as follows:

def article(assigns) do
~H"""
.... HTML code comes here
"""
end

I also see that the old code made 3 different calls by matching the content value to display different HTML:

def render_section(%{type: "hero"} = content) do
    Phoenix.View.render(PhoenixCmsWeb.PageView, "hero.html", content: content)
  end

  def render_section(%{type: "text_and_image"} = content) do
    Phoenix.View.render(PhoenixCmsWeb.PageView, "text_and_image.html", content: content)
  end

  def render_section(%{features: content}) do
    Phoenix.View.render(PhoenixCmsWeb.PageView, "features.html", content: content)
  end

when calling it from a template as follows:

<%= if @contents do %>
  <%= for content <- @contents, do: render_section(content) %>
<% end %>

How can we match the assigns to be able to display different HTML page? Or there is a better way?

4

Figured out how to fix that - by using component functions.