T
TanStack2w ago
plain-purple

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
Gist
AudienceLayout.jsx
GitHub Gist: instantly share code, notes, and snippets.
2 Replies
wee-brown
wee-brown2w ago
I don't understand the question, and there's lots of unrelated code in those snippets :/
plain-purple
plain-purpleOP2w ago
Ahh nevermind I think I fixed it… really sorry for the trash question layout.., I’m quite new to tanstack Anyways the question was how could I access data fetched in a child component from a parent! I’m basically needing to access data that I’ve fetched in a child component and I want to access it in the parent as I’m running some sorting from the parent ! What I basically did was move the entire query to the parent itself 😅

Did you find this page helpful?