This is a common problem I couldn't do the common layout when I started to learn React. The problem is getting bigger as the scope of work increases. That is why there is a need for a common layout and we will use it again and again. Let's get started
Here is a simplified implementation of what I did.
This layout component will accept to get props such as title, description, className, children by default use some property here but we will be able to pass these properties from any other bases where we use this layout and that way we can dynamically display these content. We put inside single div and title, description these are headings but they will have the entire content. So with the last name of let's say let's asset class name as well so you might want different layout for different pages. Here classname send as props and content avaiable in children props . So this our layout now we should be able to use this layout any of the pages.Let's try in the Home page to begin with.
So let's say load from home page then we can use layout instead of using the div all we can do in layout. Now pass the title,desciption and send the content at the moment let's send anything let's just leave empty.Now if you go to the home page you can see we have the target achieve
So this way you can use this component and use any other component as your need For example if you don't send anything as props then you'll see the default title and description of what we have given
The similar way I use on another page before we do that let's further to go on and make it.
Here the code base whatever pass as props to get it and show output will be shown as we send.
If I made a mistake forgive me for seeking advice on how to do a better way thank you guy's and let's make it easy.
Top comments (4)
Very simple and clean way
very helpful Article. thank you . keep it up.
thank you.
👍👍👍👍