I am trying to build an application using preact and I have created a simple component known as LayoutComponent.

In Layout component I have used Auxilary component as shown below:

import { h } from 'preact'; import Aux from '../../hoc/Aux'; const Layout = (props) => ( <Aux> <div> Toolbar, Sidebar, Backdrop </div> <div> { props.children } </div> </Aux> ); export default Layout;

And below mentioned is my Auxilary component code:

const Aux = ( props ) => props.children; export default Aux;

When I am invoking LayoutComponent from my App.js render() method, the JSX content inside tag is not getting displayed.

If I replace the tag with tag then it is working fine, but I don't need that extra div in my DOM structure.

The DOM is shown something like this in chrome if I use Aux tag.

Please Help.