how to pass JSX element from children to parent in React js - javascript

I made a layout container which has as a child as main content, toolbar, and toolbar.
toolbar and footer are dynamic parts and each container or page will have their own toolbar and footer, but layout structure is the same in all pages, so I made multiple layouts and called the related layout component in each container.
but I don't think if it's best practice or not, cause i have too many layouts right now!
so is there any way to define the layout toolbar and footer in child containers and pass them up to the layout?
I know I can use the setState method to put them into the layout state, but I also know that putting the element in the state is not best practice, cause state is for data, not JSX elements or functions.
also, another way that I thought, was putting toolbar and footer using pure javascript using innerHtml of layout toolbar and footer wrapper, but it would be real DOM, not virtual DOM, so it's not best practice either!
so if there's any best practice to having dynamic layout parts based on child component, I would be happy to know them.
thanks

Related

What is the Best Practice between burguer menu & full screen menu in a react app

So i have a website, it is responsive, in small screens the menu is open clicking in a burguer button, when there is enough space the menu is visible in the header and the burguer button dissapear.
My question is what is the best practise to handle this componetes (the burguer is a components that change a context state showMenu).
Should I have 2 diferents Menu components MenuResponsive || MenuInHeader & mount unmount them dependimg on the screen size or only one component with a ton of CSS.
Im using css.module just in case.
thanks
The beauty is that you have options. If the button is going to be reused a lot, I would create a separate component. If not, then I would probably manage responsive design with CSS using media queries or something.

How to scroll with programming within Vuetify Virtual Scroller?

I have used this Vuetify component https://vuetifyjs.com/en/components/virtual-scroller/ to make a virtual scroll within a card, but now I need to go to a specific scroll element when my hook mount is executed component vue.
How could I do that, thank you in advance for your help?
I am a native of Spanish therefore my English is a bit bad.

Simple transition for React component

I have a React component that I show/hide based on a button toggle from within its parent component. Instead of just appearing/disappearing on the page, I would like to animate the mounting and unmounting of the component to make it look as if it was sliding down from, and back into the parent. The parent is always visible.
One important note is that there are also components within the first child. One of my attempts involving CSS transitions have resulted in these children being stuck in place when the first child slides up/down. Additionally, Child has no fixed height -- it could be 100px or 1000px.
This is my only animation in the application, so I don't really want to get anything too heavy to drive it. I'm struggling to find what other people are using for this kind of thing.
For that kind of simple animations I generally use CSSTransation. The idea is pretty simple, this component will attach some classes to your element depending on the component state (mounting, unmounting,...), and you have to provide css for the animation.
I finally solved this with a small package called react-animate-height.
<div>
<AnimateHeight
duration={ 500 }
height={ height }
>
<Child />
</AnimateHeight>
</div>

Angular 2/4 choose router outlet at runtime

I have a child <router-outlet> inside a template that displays various components, based on the menu item clicked. Each child component is responsive, and handles itself well when resizing the page.
The problem is the parent component. In desktop view we need it to be one way, (flexboxes) and in mobile we need it to be another way. What this boils down to is where we put the <router-outlet>.
The obvious solution is to have a couple of <div>s whose classes are set with display: none/block conditionally with a #media query.
And here is where I'm stuck. Angular always chooses the most nested <router-outlet> to use for children. Even though the other one technically no longer exists in the DOM (display: none), the router renders the component inside that outlet.
I looked at named router outlets, but that needs to be set at compile time, in the router config. I need to decide at runtime which outlet to render, based on screen size.
Apparently this is (currently) impossible.
Angular will always choose the most-nested <router-outlet> to house the components, there is no way to determine at runtime.
My workaround was to use an unholy fusion of display: flex, display: grid and #media queries to move the <router-outlet> around the page, using CSS to determine where it will appear.

How to handle loading/spinners in container elements in react

I'm trying to figure out the best way to indicate loading in react between container and presentational elements. Do folks generally avoid any view related items in container elements or do they make an exception for spinner-type elements?
That's a matter of preference, I render content in container elements as needed. A loading spinner is no exception. That being said, if you're intending to put a spinner on the whole page then personally the container is a fine spot for this. If you intend to put a spinner over a form or some content region I'd stick to your presentational component for that.

Categories