coen.bakker

coen.bakker

Passing comprehension data from inside function component up to call of that function component

I have story_cards that render a list of authors, among other things. Clicking an author should open a modal, via a function set_modal_data/1. This function needs the to be passed one author (not all authors).

Is there a way to pass the set_modal_click/1 function to the story_card function component call (e.g. <.story_card ... on_author_click={...}/>? Currently, I am using slots to be able assign the set_modal_click/1 to the phx-click that should open the modal.

# current solution
<.story_card
  :for={story <- @stories}
  story={story}
>
  <:author let={author}>
    <span
      class="pub-cover-author-tag"
      phx-click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
    >
      <%= author.username %>
    </span>
  </:author>
</.story_card>
# hypothesized solution
<.story_card
  :for={story <- @stories}
  story={story}
  let={author}
  on_author_click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
/>

Ty

Marked As Solved

sodapopcan

sodapopcan

That makes sense!

It should work with the capture:

def story_card(assigns) do
  ~H"""
  ...
    <li :for={author <- @authors}>
      <a phx-click={@on_author_click.(author)}>...</a>
    </li>
  ...
  """  
end
def render(assigns) do
  ~H"""
  <.story_card
    authors={@authors}
    on_author_click={&JS.push("some_event", value: %{author: &1})}
  />
  """
end

(sorry I forgot the @ in my original example)

Possibly you already got that but I wasn’t sure from your response :sweat_smile:

Also Liked

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Be very careful with this. The user struct in this case is being sent to the JS front end unencrypted. I would strongly suggest pulling out specific keys that are relevant to the JS.

sodapopcan

sodapopcan

You should be able to pass it as a capture:

<.story_card
  :for={story <- @stories}
  story={story}
  on_author_click={&set_modal_data/1}
/>

and then:

  phx-click={on_author_click.(%{"id" => author.id, "modal" => "user"})

I may also be misunderstand what you’re after, though!

sodapopcan

sodapopcan

Right, you’d need to make sure you have the redacted fields set. Thanks for chiming in, I did not think of that!

Last Post!

sodapopcan

sodapopcan

Me too as I’ve never really used JS.push before. I was reading it as push_event which of course doesn’t even make sense since that is on the other side, ha. So ya, I thought you were trying to do something far more complicated like calling out to a JS event that would push back to the server or something. It seems like JS.push and a regular bare event should be handled the same.

Where Next?

Popular in Questions Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40165 209
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement