React: sending useState results object to grandparent
This is currently my App.js return
<Header/>
(below) has a 'menu' div that with a Searchbar
& Filter
component inside of it, which both filter a .json from user input and send a 'results' object , setResults(results);
, to their parent <Header/>
, where they're invoked.
Inside <Header> here, I've destructured useState to have a results to receive that results object.. which I could plug in to some html.
However, instead of calling the results objects of <Searchbar/>
& <Filter/>
here, in <Header>
, I want Header to send this received results object to its own parent, App.js.. so that I can use it with a separate <Cardlist>
element.. a sibling to Header, that will be where the results are displayed, since I want my <Switch> to be below the <Header>
GH: https://github.com/nnall/Inventory.gitGitHub
GitHub - nnall/Inventory
Contribute to nnall/Inventory development by creating an account on GitHub.
11 Replies
Hey! If I'm understanding this correctly, you are looking for a way to get the state from the
Header
component up to the App
component. Instead of calling useState
in the Header
component, why not just pass the results
as a prop to it from the App
component? The App
component is already storing the same exact data, there isn't a need to call useState
again the the Header
component."why not just pass the results as a prop to it from the App component? "
Am I passing the results object to the header here?
No, you are only passing
setResults
to the Header
component, try passing both results
and setResults
and remove the useState
from the Header
component
So something like <Header results={results} setResults={setResults} />
in your App
component, and const Header = ({ results, setResults })...
But then how is the results getting assigned here? In order to take the results object into App.js? Its greyed out here
This is my app.js
what do you mean by greyed out? it might be saying it's unused
the key is that
results
isn't getting defined there, it's getting defined by its parent component App
.so, here for example, in the returned HTML of the Header component
Searchbar and Filter each inside them invoke a setResults(results)and that works to send the results object from each of those components, into their parent here in Header.
Here, in Header, there is a destructured-from-useState 'results' object, which is automatically assigned to the results object coming from Searchbar or Filter, correct?
Kinda, yeah. Since
results
is declared in App
, setResults
will send the updated result all the way back up to App
. The Header
results
object is referencing the App
results objectThis is the Header
This is App.js
I still don't get how to pass the results object as a prop to App.js
You aren't passing anything to App.js, you are passing things from App.js
it looks like you just went back to what you had before
so my app.js
I have a props parameter in App.js.. So I need to setProps() or something?
in order to pass .. something? downward to Header?
no
i'm away from my computer right now, but i recommend reading up on prop drilling and what it means
but if a component needs to update some state, that state needs to be stored higher on the component tree