Sometimes, we want to avoid extra wrapping div in React.
In this article, we’ll look at how to avoid extra wrapping div in React.
How to avoid extra wrapping div in React?
To avoid extra wrapping div in React, we can use a fragment.
For instance, we write
const Comp = () => {
//...
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
};
to wrap the components ChildA, ChildB and ChildC with React.Fragment to render ChildA, ChildB and ChildC together without wrapping them with an extra container element.
Conclusion
To avoid extra wrapping div in React, we can use a fragment.
