CODEWITHSUNDEEP
reactjs
Zygro
Zygro

Reputation: 7119

How to pass same props to multiple components correctly?

I have a component that based on its props, renders another component with almost same props, something like this:

render() {
  return(
    <Component>
      {this.renderComponent()}
    </Component>
  )


renderComponent() {
  switch (condition) {
    case "A": {
      return (
        <ComponentA
         many={...}
         same={...}
         things={...}
         oneDifferentProp="A"
        />
    }
    case "B": {
      return (
        <WrapperComponent>
          <ComponentB
           many={...}
           same={...}
           things={...}
           oneDifferentProp="B"
          />
          <SomethingOther>
        </WrapperComponent>
      )
    }
  }
}

So how do I make this nice and scalable and easily readable?

Upvotes: 2

Views: 1693

Answers (1)

Joe Clay
Joe Clay

Reputation: 35787

You could make use of the spread syntax here.

renderComponent() {
  // Create/pass in this object however you want
  let sharedProps = { many: 1, same: 2, things: 3 }; 

  switch (condition) {
    case "A":
      return (
        <ComponentA
         oneDifferentProp="A"
         {...sharedProps}
        />
      )
    case "B":
      return (
        <WrapperComponent>
          <ComponentB
           oneDifferentProp="B"
           {...sharedProps}
          />
          <SomethingOther />
        </WrapperComponent>
      )
  }
}

Upvotes: 9

Related Questions