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.
Related
I am working on react-redux, I am a beginner I'm stuck in a problem where the Task is not to use a router I have created a slice to manage navigation on simple pages it works fine, but when I Want to move to edit page with a specific ID I don't know what method I can follow Please Guide me
when clicking on the edit button it will go to a particular id using the router we use useParams() to get the
So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
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/
I developed a React component representing a window that allows the user to interact with a chatbot. This window opens when the user clicks a button. Now, I want to make this button available in any site or application of my choice. The first idea that came to mind is to associate a URL to this button so I can call it in our site or application by simply creating a link like:
Chat with the robot .
I find the idea functional but I do not know how to associate a URL to a component in React. I looked at the React-Router side of what I understood it just allows to create the navigation between component of the same application but I do not know if its URL can be accessible outside the application where they are created.
Do you know any tips for solving such problems?
And if you have ideas other than linking the URL to the component, I'm interested.
Thank you in advance !!!
You cannot use a react component by pulling it in as external code. react-router works by wrapping you application. Any component you want to use has to be part of the actual codebase.
I'm pretty new to React and Redux and I've been setting my environment in the past week.
I was wondering if their was such a thing as a refresh button that doesn't refresh the whole page but just the components containing the props that have changed in the store.
Example :
User_1 changes the store.
User_2 clicks a refresh button on his page (container).
The components containing props that have been modified are refreshed for User_2.
The perfect situation would be if User_2's interface components would refresh as soon as User_2 does the action, but I don't think it's possible yet. (If it is, please mention it)
Thanks in advance
UPDATE:
If you use GraphQl, it's worth looking into their "subscription" solution.
If your two user's are on different computers, then the store is not shared between them. Changes made to one user's store are not going to impact the store of a second user.
It sounds like what you really want is websockets. But this would be something you need to manage with the server-side of your application first, and which react/redux would merely consume.
In general, components will always instantly update when their props change. If a component didn't update, then it's props are still the same.