ReactJS | Layout in Component

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Layout in Component.

One of ReactJS advanced features is that it allows arbitrary user interface (UI) contents to be passed into the components by using Props. As compared to the React's special children property, which allows only a single user interface content to be passed into the component, this feature enables multiple UI contents to be passed into the component. This feature can be seen as an extension of children property. One of the applications of this option is to layout the user interface of the component.

For example, a React component having a customizable header and footer can make use of this option to get the custom header and footer through properties and layout the content.

READ: ReactJS | Component Life Cycle using React Hooks

Below is a fast and simple example having two properties, header and footer -

<Layout header={<h1>Header</h1>} footer={<p>footer</p>} />

And the layout render logic is as follows -

return (<div>
   <div> 
      {props.header} 
   </div> 
   <div> 
      Component user interface 
   </div> 
   <div> 
      {props.footer} 
   </div> 
</div>)

Let's add a simple header and footer to our ExpenseEntryItemList component.

Open expense-manager application in your favorite editor.

Next, open the file, ExpenseEntryItemList.js in src/component folder.

Next, make use of header and footer props in the render() method.

return (
   <div> 
      <div>{this.props.header}</div> 
         ... existing code ... 
      <div>{this.props.footer}</div> 
   </div> 
);

Next, open index.js and then include header and footer property while making use of the ExpenseEntryItemList component.

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items}
         header={
            <div><h1>Expense manager</h1></div>
         }
         footer={
            <div style={{ textAlign: "left" }}>
               <p style={{ fontSize: 12 }}>Sample application</p>
            </div>
         } 
      />
   </React.StrictMode>,
   document.getElementById('root')
);

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

READ: ReactJS | Component Life Cycle

Sharing Logic in Component (Render props)

Render props is an advanced feature used to share logic between React components. As we discussed earlier, a component can receive arbitrary user interface (UI) content or React elements using properties. Usually, the component render the React elements it accepts along with its own user interface as we saw in children and layout concept. They do not share any logic between them.

Going one more step further, React allows a component to take a function which returns user interface rather than plain UI object via properties. The sole purpose of the function is to render the UI. Then, the component will perform advanced computation and will call the passed in function along with computed value to render the UI.

In summary, component's property, which accepts a JavaScript function that renders UI is known as Render Props. Components receiving Render Props is going to perform an advanced logic and share it with Render Props, which will render the user interface using the shared logic.

Lot of advanced third-party library are based on Render Props. Some of the libraries using Render Props are -

• React Router

• Formik

• Downshift

For example, Formik library component will do the form validation and submission and pass the form design to the calling function aka Render Props. Similarly React Router do the routing logic while delegating the user's design to other components making use of Render Props.

READ: ReactJS | State Management API

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS Pagination.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.