Capsuling many props in React

Problem

export default ComponentA extends React.Component {  render(){ 
return (
<ComponentB a={a} b={b} c={c} d={d} e={e} f={f} g={g} h={h} i={i} j={j} // ...more props />
)
}
}

export default ComponentB extends React.Component {
render(){ const {a, b, c, d, e, f, g, h, i, j //...more props} = this.props <ComponentC a={a} b={b} c={c} d={d} e={e} f={f} g={g} h={h} i={i} j={j} // ...more props />
} //In ComponentC, these props are not used.
}export default ComponentC extends React.Component { render(){ const {a, b, c, d, e, f, g, h, i, j //...more props} = this.props // more codes...
}
}

Solution

export default ComponentA extends React.Component {  render(){ 
return (
<ComponentB settings={{a: a, b: b, c: c, d: d, e: e, f: f, g: g, h: h, i: i, j: j}}/>
)
}
}
export default ComponentB extends React.Component { render(){ const { settings } = this.props <ComponentC settings={settings}/>
}
}export default ComponentC extends React.Component { render(){ const { settings } = this.props <div>{settings.a}</div> // used liked this
}
}

Started LinkedIn as well!

https://www.linkedin.com/in/tomoharu-tsutsumi-56051a126/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store