Not able to see prop value in search bar . Any help?

JavaScript
1

Hi I wanted to know how can I can get the text input value from search bar and pass to my another component where I have an API url as search query.

I have seen many videos which uses props and I guess that’s the correct way if not wrong to send the data between components. However, I tried to use that but I have an issue. I can not see the props value which I have passed from my nav component to the product component.

any help how can I do that. Please if you can provide a source code explanation would be great.
Please see the code here https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/App.js
Thanks

2

Hi @tapesh, how can you pass a prop from Nav to Product if the two are not related?

Yes, using props in react is the correct way to pass data, but it requires a parent/child relationship for it to work.

The way you’ve set it up there’s no such relationship.

So you have two options:

1 - lifting the state up.

Meaning moving the state to a common parent of the two

2 - using react context.

It is really up to you, but I would start with option 1, and then consider context if you don’t see it fitting with your needs.

Hope this helps.

1 Like
3

Hi @Marmiz

Sorry for asking this but as new and trying to work around react can you please let me know what do you exactly mean by lifting up state ?

Thanks

4

React has a page documenting that, and I think they do a better job that I could.
So here you go:

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.