Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Returning adjacent element in React.js and HOC
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.
212 Views
