This code explains that we can pass component and content as props but can anyone explain which is the good practice to code. which will be better, pass component or content as props?
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
};
**OR**
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
<Contacts>{this.props.contacts}</Contacts>
</div>
<div className="SplitPane-right">
<Chat>{this.props.chatContent}</Chat>
</div>
</div>
);
}
The first approach is good when you are creating container - component you are going to use for many different appliances. You can next customize it easily, giving as left and right arguments whatever you want.
The second one is useful when you decide that your component should include exactly Contacts and Chat subcomponents, when they are inherent parts of it - then you are sure they won't be changed.
But if you are not sure, I'd suggest the second approach - that way you avoid potential problems and can easily see in code what components are rendered, which accelerates development.