How to pass query data to parent component in react?
hey guys ive recently started working with tanstack query in react and im facing an issue!
so basically i have a parent component
lets call is AudienceLayout.jsx
and child components hot.jsx and new.jsx that fetch posts!
in my audiencelayout.jsx i have a shared layout with filter options that sort posts by upvotes / comments etc
and a dashnav component that has 2 navlinks for toggling between hot and new posts fetching!
now the issue is is there a way i can pass the data fetched from useQuery in the child components to the parent so they can run the sorting / filtering?
or should i run the query from the parent itself ? if so how could i do that?
as by default the navlink is hot so it renders the hot.jsx component and runs that query ! could i dynamically pass in "new" as a parameter that would run the new.jsx query?
here are the relevant code files: https://gist.github.com/moahnaf11/6bbb95ea9c009821a10100304d61a180
AudienceLayout.jsx is the parent it has DashNav(Navlinks for hot and new) and FilterBar (has the sorting UI and triggers sort by setting state in the parent)
Hot.jsx is the child component that runs the useQuery for fetching posts and i somehow either need to find a way to pass data from hot to parent so it can do the sorting / filtering
OR
i need to find a way to dynamically start the fetching from AudienceLayout.jsx itself based on the navlink or something, by default its already hot which is right but how could i make it fetch new if i click "new" navlink?
any pointers and guidance is highly appreciated !
Thank You
so basically i have a parent component
lets call is AudienceLayout.jsx
and child components hot.jsx and new.jsx that fetch posts!
in my audiencelayout.jsx i have a shared layout with filter options that sort posts by upvotes / comments etc
and a dashnav component that has 2 navlinks for toggling between hot and new posts fetching!
now the issue is is there a way i can pass the data fetched from useQuery in the child components to the parent so they can run the sorting / filtering?
or should i run the query from the parent itself ? if so how could i do that?
as by default the navlink is hot so it renders the hot.jsx component and runs that query ! could i dynamically pass in "new" as a parameter that would run the new.jsx query?
here are the relevant code files: https://gist.github.com/moahnaf11/6bbb95ea9c009821a10100304d61a180
AudienceLayout.jsx is the parent it has DashNav(Navlinks for hot and new) and FilterBar (has the sorting UI and triggers sort by setting state in the parent)
Hot.jsx is the child component that runs the useQuery for fetching posts and i somehow either need to find a way to pass data from hot to parent so it can do the sorting / filtering
OR
i need to find a way to dynamically start the fetching from AudienceLayout.jsx itself based on the navlink or something, by default its already hot which is right but how could i make it fetch new if i click "new" navlink?
any pointers and guidance is highly appreciated !
Thank You
