CODEWITHSUNDEEP
reactjs
Darpan Rangari
Darpan Rangari

Reputation: 1570

Is it a good practice to use pass component as a props in react or we should pass content as props?

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>
  );
}

Upvotes: 3

Views: 934

Answers (1)

Karol Selak
Karol Selak

Reputation: 4774

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.

Upvotes: 1

Related Questions