Code example: https://codesandbox.io/s/jovial-paper-s0c69?file=/src/App.js
Material UI makes smooth collapse.
But, when I put JSX to external component, smooth brakes.
I made code example with smooth collapse and without smooth collapse.
How can I keep Lists in external component and keep smooth collapse?
But, when I put JSX to external component
Your example does not actually use an external component, you define Lists inside of NestedList and that function is consequently recreated on every render.
The desired behavior can be achieved by actually having a separate Lists component that receives the required props from its parent:
<Lists open={open} handleClick={handleClick} />
Related
Objective
My goal is to have an AppBar at the top of the page that has a title in it. Then in the "Main" area of my screen I will have a route that renders a different component depending on the url. These are the components that need to update the page title that is being rendered in the AppBar. I only want the AppBar to re-render and nothing else, because it's the only thing that will have actual data change in.
Originally I was using useState() and just prop drilling the [pageTitle, setPageTitle] down to the components. From what I've read, you should avoid prop drilling if possible.
So I've tried leveraging useContext() but everything in the tree still re-renders.
Caveats
I would like to keep the layout of the HTML like I currently have it if possible. I'm not sure if that affects anything.
How I Tested For Re-rendering
I have console.log() statements per component. I got rid of strict mode in order to make sure the components are rendering only once. I tested this prior to leveraging useContext and the statements only print out once.
Now when I click on a navigation link you will notice it prints out a console.log() for all of the components that <PageTitleContext.Provider> is wrapping.
I only want the <AppBar> to re-render and nothing else, because this is the only component that is displaying the pageTitle.
Sandbox Code
https://codesandbox.io/s/appbar-page-title-update-m5y9el?file=/src/pages/Dashboard.jsx
I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:
The <TransitionGroup> component manages a set of transition components
( and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the
mounting and unmounting of components over time.
Consider the example below. As items are removed or added to the
TodoList the in prop is toggled automatically by the
<TransitionGroup>.
I'm not really sure what that means or why it's important.
Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).
Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)
React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.
Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.
It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.
It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.
It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.
I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.
So I have a component that returns a button with some custom text and an icon. I'm pulling the icons from expo vector icons and so to use the icons I need to write something like:
<Icon_Name name"name"......>
I want to wrap my custom component around an icon or any other component, so then I can use various different icons within that component.
So I want my code to basically be:
<Custom_Component>
<IconOrSomeOtherComponent />
</Custom_Component>
I want to somehow call that icon component within my custom component. Is this possible?
I know that I can pass in variables into a custom component like:
<Custom_Component someVariable="some variable" />
and then use "someVariable" within my the function of the component, but I was hoping to find a solution where I can just wrap a component and call the "wrapped" component inside the function of my "Custom_Component".
I'm using functional components by the way, not class components.
I'm trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.
Is it possible to have this markup in the html:
<tabs>
<tab title="a title" tab-content="content">
<tab title="a title" tab-content="content">
</tabs>
and have react take that structure and create tabs functionality from it? i.e. create a list from the tab titles and divs for the content which get switched on/off depending on which tab is active.
I've come a background in Angular so may be thinking too angular-centric.
There are a variety of ways to go about creating tabbed content in React. What I believe you're asking though - specifying the content in the html - seems counter to the "react way" of doing things. From the React docs:
Remember: React is all about one-way data flow down the component
hierarchy. It may not be immediately clear which component should own
what state. This is often the most challenging part for newcomers to
understand...
The data for a given component is passed to the DOM rather than derived from it. So I wouldn't expect a React navigation component to get its functionality from existing html content but from the props passed in from the parent component or state that it manages itself.
While you could build this yourself, you may want to look at react-router which will provide some mechanisms for client-side routing and managing tabbed content.