Gilou06
Same LiveComponent renders in two places?
Hello,
I wonder if is is feasible to render the same LiveComponent instance in two locations within a LiveView.
The typical case would be a LiveComponent in charge of a state, I would need to display and modify some fields in one HTML location of the LiveView, and the other fields somewhere else (HTML location).
Or, in other words: LiveComponent manages state data= %{a: one, b: two, c: :three}, I need to have a form about a at the top of the LiveView HTML page, a form about b and c at the bottom of the LiveView HTML page.
Of course, the LiveComponent would process the DB access for data as a whole.
That would require calling the LiveComponent twice within the LV, with same id and a way to select a different render function.
Is this crazy thinking ?
Thank you
First Post!
LostKobrakai
You cannot have the same LC using the same id multiple times. The whole reason there’s an id is that it uniquely identifies the LC. The also cannot share their state. But it sounds like what you’re looking for could be done without those two things anyways. Have a LC to handle the form – pass in a, b, c individually.
Last Post!
absowoot
I think I had a similar situation where I had state (cart) that lives in the parent LV but is updated from live components (product form LC and cart LC). All cart logic lives in the cart LC and I call the module function needed (cart LC → add product to cart) while handling the form submission in the product form LC.
In the cart LC functions, I broadcast the updated cart data to the parent LV with pubsub and attach_hook which then updates the LV cart state.
Hope this makes sense, tough to explain on mobile.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"