I have been using React Js for a couple of years now and have created several applications using react js. During all this time I have came across this situation where I want to return multiple tags.
Before react js version 16 in the above mentioned situations you were forced to wrap the content inside a parent tag i.e. div tag and because of that you end up with a lot of unnecessary div tags.
class SomeComponent extends React.Component {
render(){
return (
<div>
<button>Some button</button>
<button>Some other button</button>
</div>
);
}
}
Developers of React js have introduced a component in React js version 16 by the name of Fragment . Now instead of using the div tag for wrapping our component we can simply wrap our markup in Fragment
Here is how we use Fragment in React js version 16
class SomeComponent extends React.Component {
render(){
return (
<React.Fragment>
<button>Some button</button>
<button>Some other button</button>
</React.Fragment>
);
}
}