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
Related
I'm an embedded developer who is new to React and am struggling a bit with the behaviour of child components and nested child components.
I understand that for any component to be re-rendered, the state must change. I am using an example of a menu component that has an item component within. When some global level event happens, I want to change the text displayed by the item components.
Here is a fiddle that shows some code that I would expect to work:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
On clicking the div, the menu's setText function gets called, which calls into the item component, setting the state. This state is used in the render function of the item component, so I would expect both item and menu to be re-rendered.
Instead I get an error saying that I can't set the state of an object that hasn't yet been mounted. I would have thought it had been mounted..
Perhaps the way I have linked the declared components with those in the render functions by calling this.componentname.render() is the issue - but how else could that be done?
Thanks in advance!
Here is a working version of your sandbox.
https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
I see that you are new to react. I would suggest you use hooks instead of class components.
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 have made a navbar, which holds a searchbar, and 3 icons.
On clicking these icons, a modal is rendered.
I wanted help with two things.
Closing the modals on outside clicks!, and
The hover element is slow because it has three states, every time it is called it re-renders the code from bottom to top. I wanted the hover to have one state assigned to one parent element. But on doing that, the hover effect for all three buttons gets activated at the same time.
Code is up on : https://codesandbox.io/s/unruffled-snowflake-he95w
Please feel free to edit the code and pass me the edited fork.
I have tried handleBlur, passing an event, and eventListener.
https://codesandbox.io/s/unruffled-snowflake-he95w
Expected - Modal rendered on screen should get disappeared on clicking outside the modal.
P.S - semantic UI icons are not rendering, but they are there. They will activate if you hover over them.
Credits - SVG close icon problem solved by Drew Reese.
Ah, I see. Your ToolBar is the controlling component, i.e. the state about whether or not each toolbar item is open is stored there. You need to pass a close handler to the children components so when a "close" button is clicked it is calling the callback the parent passed in.
Here is a fork of your sandbox where I pass in an onCloseClick callback to the calendar/picker thing that simply toggles that state value back to false to close it. The picker then just assigns that callback as its onClick handler for the contaning for the close button.
You can apply the same logic to the other two components.
Note: since the icons aren't rendering for me either I added some text to the buttons so they are easier to find/see.
I am currently using ant design tabs to control the tabs and within each tab I inserted a custom component within the TabPane. But the child custom component works quite unexpected. Before I clicked the tab title, the child component will not load (the constructor and componentDidMount will not be fired), BUT I want to load some data once the child component mounted to the tab instead of being shown.
Why it happened? ~~Ant Design~~ for performance concern?
Currently I am moving the data loading to the parent and handle them there. But still quite curious about the loading issue caused by ant design.
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)?