I am using ui-router for maintaining the state in my application. The application has one abstract parent state and few child states. Parent state has got some resolves (working fine), now since I have a parent abstract state I can only navigate to a specific child which is updated in the $state.current property by default when I navigate to child state.
The Resolve in the parent might give some data based on which I don't want to navigate to the current child but to some other state. Like an auth error kind of use case, although I can use $state.go() to navigation to auth state but current child state still gets fired, any way to update the current child state and not let it fire the default child state.
Related
I have a child component sitting inside a parent component. Parent component has some information, say I, which keeps changing based on user actions. In child component I have a button, and I want to change state of this button based on current value of I.
What is idiomatic way of doing it in scalajs-react/React?
Pass it via props and optionally use Reusability to prevent the child components from needlessly re-rendering too often.
I have a main component which has 3 child components which are conditionally displayed. There are arrow buttons to change which child component is rendered. One of the children has states which need to persist even when the component is no longer the child which is displayed.
The problem is, I don't feel like the state data from this child component should be passed back to the parent as the method to maintain state. In this scenario i want the child's state to only live in the child component. Is there a method i could use to maintain this state? For example,
will the state persist if i render each child but use CSS (or some other option) to conditionally hide the non-active child?
You can add display: none, and the component will still be mounted and will keep the state. Although this might work I recommend lifting the state up to the parent. It seems like it should live there. Otherwise you can create a context wrapping the 3 children and manage the state there. Then in each child can subscribe to that context, but it seems like an over kill. I recommend lifting the state to the parent
Is it easier than pass argument from parent to child and turn on binding to know state of a component changed?
https://dev.to/zeyadetman/how-to-pass-state-between-components-in-reactjs-2pg1
I understand, why I have to interact with DOM through dispatcher in cases when I fetching data from database.
But should i use Flux way to do something like this:
Parent component have been rendered. It has two child components. One of them initially rendered, the second child should replace first child onClick on some button. All components are static (no database connection).
So, how should I implement this action onClick and replace first child with second one?
Dispatch event once the onClick has been fired, parent component should listen and re-render the new item.
I have multiple nested views ui-view on my page with corresponding states to set templates in those views. When I transition to a child state, controller associated to each of its parent states gets called. I want to prevent this.
For example, if I transition to state root.question.mcq.menu, the controller associated with state root.question.mcq too gets called.
How can I prevent this so that only the controller associated with root.question.mcq.menu gets called.
It depends where you come from. Do you come from the parent or from a sibling of the target state the parent controller should not be initialized. But if you come from any other state the parent controller will be initialized. If this behavior is wrong for you then you probably have a design issue.