#Creating a new component from data fetched

5 messages · Page 1 of 1 (latest)

narrow jacinth
#

Hello.

I'm trying to separate my weather data from my index file (where it works well).

I created a new file called Weather.astro in the components folder. Moved into it the fetch command and the const 'data = await response.json();' I assume I'm supposed to export the data so I can use it on the index page, but I can't get it working.

Then I need the other side, where I import: 'import Weather from '../components/Weather.astro';' and then how do I get the data out of that so I can parse the JSON?

Thank you!

stiff stump
#

I dont believe that you can pass props up (from a component to parent) in astro. Just curious, what are you wanting to achieve by moving your data fetching from you index into Weather.astro ? I would simply move your fetching logic back to index.astro so that you can pass your data down to various components.

narrow jacinth
#

I can do that. I just thought it would be cleaner to break things into smaller pieces.

terse raft
#

You can fetch in your index file and pass as props to the Weather component. You can continue to create sub components as pass data props. As long as it's moving from parent => children.

You can't do child to parent in astro

solid bough
#

Well you can. What eyecracker wants to do here is create a new typescript file, fetch the data in there and return an object