Returning adjacent element in React.js and HOC

React JSJavascript LibraryFront End Technology

Generally the return statement in React’s render method returns a single div element enclosing all the child jsx like below −

render(){
   return (
      <div>
         <h2>Header</h2>
         <p>Test</p>
      </div>
   );
}

Here we cannot simply return multiple elements, we need to have a parent container similar to div as shown above.

If no parent container element, then we can even return an array like below −

While returning an array we will require an unique key to be given to each element of an array

render(){
   return (
      [
         <p key=”1”>Paragraph 1</p>,
         <p key=”2”>Paragraph 2</p>
      ]
   );
}

But with the use of an array, we cannot provide a css classes which we can do on a wrapping div element.

The solution to above problem is to use higher order component (hoc). With hoc we can give an add-on feature to component like adding some css classes to it.

Using higher order component

Create a simple functional component

import React from ‘react’;
const wrapperComponent = (props)=> props.children
export default wrapperComponent;

Use the above wrapperComponent in place of div element in above code sample

import wrapperComponent from ‘wrapperComponent’;
   render(){
      return (
         < wrapperComponent >
            <h2>Header</h2>
            <p>Test</p>
      </ wrapperComponent >
   );
}

Now css classes can be added to through this wrapperComponent.Let’s see how to do it.

We can add css class in wrapperComponent like below −

import React from ‘react’;
const wrapperComponent = (props)=> {
   return (
      <div classes={props.classes}>
         {props.children}
      </div>
   )
}
export default wrapperComponent;

This component is now a re-usable component. We can pass the classes to wrapperComponent as props.

render(){
   return (
      < wrapperComponent classes={classes.App}>
         <h2>Header</h2>
         <p>Test</p>
      </ wrapperComponent >
   );
}

The another alternate approach of writing HOC

const wrapperComponent =(ChildComponent, classes)=>{
   return (props)={
      <div className={classes}>
         <ChildComponent {…props}/>
      </div>
   }
}
export default wrapperComponent;

The props are passed to child component using es6 spread operator.

Here we are returning a functional component but we can return a stateful class component as well.

const wrapperComponent =(ChildComponent, classes)=>{
   render(){
      return class extends Component{
         <div className={classes}>
            <ChildComponent {…this.props}/>
         </div>
      }
   }
}

The props are passed using {…this.props} as usual in case of class based component. Passing of props to child component is necessary to maintain their linking with the coming props on that component.

Please note that we are returning an anonymous class therefore we don’t have any name after keyword class.

The ChildComponent which we wrapped inside a div should not be manipulated here though.

Now, we can wrap our ChildComponent and pass the css class like below −

render(){
   return (
      < div>
         <h2>Header</h2>
         <p>Test</p>
      </ div >
   );
}
export default wrapperComponent(App, classes.App);

Lot of third party libraries use the hoc feature like Redux to provide add-on feature to react components.

Using React.Fragment

Now, for returning multiple element we used div , an array or custom react hoc components. React Team has come up with this as built in feature in latest release.

So we can use it as −

return(
   <React.Fragment>
      //multiple or single jsx code
   </React.Fragment>
)

Shorter version of React.Fragment is <>

return(
   < >
      //multiple or single jsx code
   </ >
)

But before using this feature, Make sure React is having latest version in your app.

raja
Published on 04-Sep-2019 13:16:01
Advertisements