JavaScript and React.js

I love using the spread operator to clean up my prop passing when working with React, which I always placed in my render . I love using the spread operator to clean up prop passing when working with React, which I always placed in render . render() { const componentProps = {dog: 'dog', cat: 'cat'} return ( &ltdiv&gt &ltMyComponent {...componentProps}/&gt &lt/div&gt ) } One level of abstraction for prop passing. But we can go deeper. One more level of abstraction. > Why I found myself writing a component with 7 children, all of which needed props (will probably need refactoring later on). I was declaring my props, as normal, in my render . But it ended up being 30 lines of code before I even returned anything. I have a solution Make an entirely new function and create all your props there. get childComponentProps() { const componentProps = {dog: 'dog', cat: 'cat'} return