How to share data between multiple web components on a single page

Targox · 2025-05-21T09:47:16.146+00:00

I have a Webflow page with two separate web components: 1. A user profile component, which handles all API calls related to loading the user and member data. 2. A course list component, which displays all available courses the user can sign up for.What I’d like to achieve is this:If a user is already registered for a course, the course list should hide the “Register” button and instead show a message like “You’re already signed up for this.”The issue is that the course list component currently has no access to the user data held by the profile component. Duplicating the same API calls across both components feels inefficient and like poor practice.If cookies/storage is the only way, so be it, but I'd like to know if there's a more elegant way. Thanks!

Targox

2 months ago

I have a Webflow page with two separate web components:
1. A user profile component, which handles all API calls related to loading the user and member data.
2. A course list component, which displays all available courses the user can sign up for.

What I’d like to achieve is this:
If a user is already registered for a course, the course list should hide the “Register” button and instead show a message like “You’re already signed up for this.”

The issue is that the course list component currently has no access to the user data held by the profile component. Duplicating the same API calls across both components feels inefficient and like poor practice.

If cookies/storage is the only way, so be it, but I'd like to know if there's a more elegant way. Thanks!
needtheanswers

2 months ago

There are no items (divs etc) in user profile component? It just handles the API calls? If so I would add a slot to the user profile component, add the course list component as a child and then pass the data on via context
needtheanswers

2 months ago

cool UI btw 🙂
@needtheanswers
There are no items (divs etc) in user profile component? It just handles the API calls? If so I would add a slot to the user profile component, add the course list component as a child and then pass the data on via context
Targox

2 months ago

There are actually!
@needtheanswers
cool UI btw 🙂
Targox

2 months ago

Thanks!
@Targox
There are actually!
needtheanswers

2 months ago

Hmm I understand. I updated my setup a while ago to use one single provider component that handles all the API calls and data logic. That way, I can easily pass the data around - maybe that approach could work for you too (means you would have to create a third component that acts as parent). I can´t think of any other solutions at the moment
but maybe someone comes up with a better idea.
@needtheanswers
Hmm I understand. I updated my setup a while ago to use one single provider component that handles all the API calls and data logic. That way, I can easily pass the data around - maybe that approach could work for you too (means you would have to create a third component that acts as parent). I can´t think of any other solutions at the moment
but maybe someone comes up with a better idea.
Targox

2 months ago

Thanks for the info! I might go the parent route or just use local storage
@Targox
Thanks for the info! I might go the parent route or just use local storage
needtheanswers

2 months ago

You are welcome! Good luck 👍

How to share data between multiple web components on a single page

Targox

needtheanswers

needtheanswers

Targox

Targox

needtheanswers

Targox

needtheanswers