Fairly noob question. But the react-bootstrap docs show how to do this when the button to open the Modal is in the same component as the Modal itself. So in that case it's fairly trivial to simply call the open method directly from the click handler. But I think a more normal method is when the modal exists as a separate component from the the Modal, for example from the Navbar.
How is this typically handled? Is there a way to call a method on a different component? Or am I supposed to raise some event (using Reflux or whatever)?
Related
I have a Menu component which contains two animations. Start and Exit. I click on the button in the Header, the component is rendered, and the fade-in function is triggered in useEffect .
Clicking again removes the component. The problem is that I have to store the start animation in the Menu component and the exit animation in the button component. It's inconvenient and confusing.
I would like to store both animations in Menu. To do this, you need to somehow call the Exit function in the child component from the parent.
I've been struggling with this for a very long time. I will be glad to any ideas.
The components are functional.
p.s. I am using the npm package for animations. So I just need to call the function for it to work
I am using a button to display a modal for a particular profile (different buttons for different profiles). By using a hook, the modal just renders the last profile's info. (I am mapping the profile info list)
Is there a way I can call the modal component in the mapping itself without using Hook? Or any different approach to this problem?
(P.S the code is too long, hence not pasting it in the question description)
I wired up parent and modal using another component in between, and it worked.
I created a component receiving props(containing profile info) from parent and passing it to the modal. And the modal is called from the parent via this new component.
So I'm trying to understand how to move focus when a new page loads in my application. This question came to my mind: what could I do if I want to focus on some element that is somewhere outside of my component. It seems to me that everywhere they write about the focus it's always used with refs. You can pass ref to a child. What if I want to focus on element to reset the focus on the page when a link is clicked and new page component is loaded? Or if I want to make skip link component higher in the tree and focus on a header in element? I have a lot of components, it doesn't seem a great idea to pass refs down through several components.
I feel like I'm missing something.
I'm interested about this because I'm learning about accessibility and how to make possible to navigate page only with keyboard.
what could I do if I want to focus on some element that is somewhere
outside of my component.
What if I want to focus on element to reset the focus on the page when
a link is clicked and new page component is loaded?
You can just pass callback of focus handler into your inner component and call it when you want.
I've posted this on Reactiflux but may get more traction here. I've created a sandbox to demonstrate my need: https://codesandbox.io/s/xvnk0znw7z
What I'm trying to do is create a generic modal wrapper that I can use to encapsulate several components; in the sandbox, the component is a date range picker, but I also have a formik component for example.
The thing is, the Apply and Clear buttons need to be a part of the wrapping modal, and not the child component it wraps.
However, when clicking on Apply or Clear, saving the child component state to the Context (not included for brevity) is really the responsibility of the child component itself; only it knows how it should do it.
In the example above, that would be the ok and clear methods of DatesPicker. Intuitively, I would call children.ok and children.clear from the wrapping modal, but I know for a fact that's not how it should be done.
I looked a lot at the Cat and Mouse render-prop example in React's docs, but I can't get my head around how I can apply this here.
I am looking for a good code pattern to allow some communication between components, when using React & Redux.
Most likely this communication should be done via redux, like many articles suggest. (like this one, for example).
However, there are some situations when using the store would be a bit of a hack rather then using it for state management. These special cases are usually when you need to give a command to a component, like show or hide.
I will give an example:
Lets say that we have a <Tooltip /> component which all it does is render some help icon, that when clicked, opens a tooltip popup.
And lets say that we have more than one in a page, but we want to make sure that only one is open at a given time. So if tooltip A is open, and the user clicks on tooltip B, then B should open and A should close.
Here are some patterns that I thought might be relevant to implement this requirement:
Using Redux: We could have in the store some state for these tooltips:
{
showTooltip: "A" // the ID of the tooltip to show
}
This means that we have to connect the tooltips to the redux store, and check for each tooltip if it's ID is the one that should be opened, and when the user clicks on the tooltip icon, we dispatch an action to set the opened tooltip.
Using additional event mechanism: We can use an additional event mechanism to Redux, like emitter.
In this case we can fire an event whenever a tooltip is about to be opened, and all other tooltips can listen and hide themselves once they get such an event.
I have to say that it seems to me that maybe having two event mechanisms in the app seems a bit redundant, but on the other hand, using redux store to communicate with components seems a bit overkill.
Would love to hear some opinions about this issue.
The React and Redux world generally encourages representing your app's behavior as state. For example, rather than an imperative $("#someModal").show() command, you might save a flag value somewhere that says {modalVisible : true}.
There's numerous examples of using state to drive modals and popups. A typical implementation would store the values for a single modal or a list of modals in state somewhere (either in a parent component or in Redux), and then render modal components as appropriate based on those values, such as: {type : "notificationPopup", level : "warning", message : "Something happened!"}. The basic approach works whether you're storing the data in React, Redux, MobX, or something else.
For specific examples, see Dan Abramov's answer to "How can I display a modal dialog in Redux?", Dave Ceddia's article "Modal Dialogs in React", the article "Scalable Modals with React and Redux". I also have other articles that demonstrate modal management in the React Component Patterns#Modal Dialogs and Redux Techniques#UI and Widget Implementations sections of my React/Redux links list.