I have a project that has a "service unavailable" component built in. Whenever this component is shown on a page, it is to hide certain navbar link items and only show a select few.
The navbar is also a separate component and each nav link item has it's own id.
Should I be using some like setState?
I'm new to react and any help is appreciated. If you need some code for me to add, also let me know.
I think global state is something you are looking for. Using redux you could easily set serviceUnavailable state and check it in navbar, and then render your links accordingly. You can learn more about approach, usage and installation here:
https://react-redux.js.org/
Related
I have a navigation bar that has a dynamic prop and data of this props should be fetched from API in getStaticProps. the navigation bar should be displayed in all pages of my website. so the best way to display the nav bar in all pages of my website is to put that in _app.js component. but I want to use getStaticProps method to fetch those data! and the problem is that _app.js doesnt have this feature. all my pages render statically. so if I use getInitialProps method in _app.js page, I lose automatic static optimization and I don't want it. in the other hand, I don't want to fetch the data on the client side. so what should i do in this situation? Whats your suggestion? note: I searched a lot on the internet and I saw a lot of questions in Stack Overflow but I couldn't find exactly what I want.
UPDATE
from the answers of this question and other questions, i think i have no way and i should choose between using a layout and getInitialProps. But i have an idea. I can fetch datas on the server for example each 60 seconds and then store the fetched datas in a json file. And then i can import that json file in my nav bar component and use the latest datas of nav bar components. Whats your mind about this idea? How can i implement this idea in next js? Thanks for help again.
You can use React context for the data that is required in other components. Populate it with data from inside a page component and use the data in other components thereafter.
I'm very new to all of this and I've been stuck on these two problems for over a week, reaching out to the community to better understand the issue.
Here is the project have Frankensteined together: https://codesandbox.io/live/ec9a16d7ef6
I have a button in the navbar to login in with Metamask. I have another button on the 'nft collections' page to mint an NFT that shows up after you are logged in. My issue is that button only shows up after a refresh or switching between pages and I want it to update automatically. I'm assuming that the state (currentAccount) isn't being passed through components properly but I'm having difficulty understanding useState.
My second problem I'm trying to work through is creating a conditional render on the navbar that will include another page that can be accessed when a user has a specific NFT collection in their wallet. Again, I'm brand new to all of this so even just some examples to look at or helpful tutorials would be awesome. Thanks.
I'm having trouble doing the same with my app. I've added a Select component, but it doesn't render correctly. Should I be using a different nested component to create this?
I cannot see an example in material-UI's documentation. I am not sure of the correct styles to use. I am using a Select component here, but I'm not sure if its the same the Material UI website is using as it doesn't seem to inherit the correct style. It would be great if someone can point me to the correct method of adding a drop-down to the Toolbar.
That "dropdown" is actually composed of Button Component and Menu Component.
The docs site is open-sourced and you can check the implementation here.
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.
I'm creating a data fill in page, and I want to ask users to confirm that they want to leave the page. I see that react router provides an onLeave function with no arguments, but I don't see how to use it in the way I need.
Thanks