React with TS can't see any contect inside background wrapper component - reactjs

Question

Here is the register component code -
const RegisterView = () => {
return (
<Background>
<h1>ddd</h1>
</Background>
);
};
The background scss -
.mainContainer {
display: flex;
flex-direction: row;
min-height: 80vh;
min-width: 140vh;
align-items: center;
justify-content: center;
background-color: map-get($colors, primary);
padding: 100px;
position: relative;
z-index: 10;
&:after {
background-color: #fff;
border-radius: 15px;
content: '';
position: absolute;
top: 90px;
left: 140px;
right: 140px;
bottom: 90px;
z-index: -1;
}
}
Background component view.tsx -
import classes from './Background.module.scss';
const BackgroundView = () => {
return (
<div className={classes['mainContainer']}></div>
);
};
BackgroundView.displayName = 'Background';
BackgroundView.defaultProps = {};
export default BackgroundView;
Background component tsx -
import BackgroundView from './Background.view';
const Background = () => {
return (
<BackgroundView />
);
};
Background.displayName = 'Background';
Background.defaultProps = {};
export default Background;
The Background component should be a wrapper for all other components. Here is what I'm getting right now -
I can't get any content inside the component, what is the problem?

Answer 1

You've wrapped BackgroundView in a Background component you've written like this:
const Background = () => {
return (
<BackgroundView />
);
};
That throws away any children you've provided to the Background component. If you want to put those children in the BackgroundView, you have to do that explicitly:
const Background = ({children}) => {
return (
<BackgroundView>{children}</BackgroundView>
);
};
You have the same problem with BackgroundView, so:
const BackgroundView = ({children}) => {
return (
<div className={classes['mainContainer']}>{children}</div>
);
};
It's also not clear why you have Background at all. You could just use BackgroundView directly.
Just as a side note, there's no need for the () around JSX elements (provided you start the JSX element on the line with the return, not the next line):
const Background = ({children}) => {
return <BackgroundView>{children}</BackgroundView>;
};
and in fact, if you like, you can use the concise form of the arrow function:
const Background = ({children}) => <BackgroundView>{children}</BackgroundView>;
but those are both just style things, you may prefer to do it differently.