An alternative to create a layout? - reactjs

Question

I want to create a layout containing the header and footer, with in middle every other component.
It will look something like this:
<Layout>
<Component1/>
<Component2/>
...
</Layout>
Technically I already achieved the desired outcome by using semantic ui react's Container and my code looks like this:
import React from 'react';
import { Container } from 'semantic-ui-react';
import Footer from './Footer';
import Header from './Head';
export default props => {
return (
<Container style={{width:'100%'}}>
<Header/>
<div style={{marginTop: '1%'}}>
{props.children}
</div>
<Footer />
</Container>
);
};
I would like to achieve the same result, but without using the Container offered by semantic-ui-react.
I tried in fact to remove <Container> but I am getting this error:
Line 9: Parsing error: Adjacent JSX elements must be wrapped in an
enclosing tag. Did you want a JSX fragment <>...?
If I remove completely the <div> tag I am getting another error:
Unexpected token, expected ","
I am not 100% sure but I understood that I should be using a class which expands the react component. I tried this which also failed:
class props extends React.Component {
render(){
return (
<Header/>
{props.children}
<Footer />
);
}
};
export default props;

Answer 1

You can remove <Container/>, but you will still need a parent component to wrap <Header/>, <Footer/>, and your content div, if you wish to keep the same markup. If, for semantic reasons, you don't want to use a div, use <React.Fragment/> as zfrisch mentioned
import React from 'react';
import { Container } from 'semantic-ui-react';
import Footer from './Footer';
import Header from './Head';
export default props => {
return (
<div style={{width:'100%'}}> // OR <React.Fragment/>
<Header/>
<div style={{marginTop: '1%'}}>
{props.children}
</div>
<Footer />
</div>
);
};