javascript - Is it a bug to discard passed rest-props to a React component? -

i'm developing wrapper on flexbox in react: https://github.com/aush/react-stack. have top level component creates container div , sets flex properties , map on it's children , set flex properties them (i don't create additional wrapper divs children, set flex properties directly them). , it's works flawlessly except 1 case.

my component, stripped down:

export default ({ someprops, style, children, ...rest }) =>    <div style={{ ...style, ...flexcontainerstyle }} {...rest}>   {     react.children.map(children, (child, i) =>       react.cloneelement(child,          { key: i, style: { ...child.props.style, ...flexitemstyle } }))   }   </div>; 

consider simple example, when children standard divs:

codepen example 1

  reactdom.render(     <horizontal>       <div classname="box1">1</div>       <div classname="box2">2</div>       <vertical>         <div classname="box3">3</div>         <horizontal grow={1}>           <div classname="box4" align={'end'}>4</div>           <div classname="box5" align={'end'}>5</div>           <div classname="box6" align={'end'}>6</div>         </horizontal>       </vertical>     </horizontal>,     document.getelementbyid('app')   ); 

now, let's have these 2 react components: buggedcomponent , notbuggedcomponent , put them children:

codepen example 2

  const buggedcomponent = ({ children }) =>      <div classname="box5">{children}</div>;   const notbuggedcomponent = ({ children, ...rest }) =>      <div classname="box6" { ...rest }>{children}</div>;    reactdom.render(     <horizontal>       <div classname="box1">1</div>       <div classname="box2">2</div>       <vertical>         <div classname="box3">3</div>         <horizontal grow={1}>           <div classname="box4" align={'end'}>4</div>           <buggedcomponent align={'end'}>5</buggedcomponent>           <notbuggedcomponent align={'end'}>6</notbuggedcomponent>         </horizontal>       </vertical>     </horizontal>,     document.getelementbyid('app')   ); 

in case, box 5 doesn't have properties besides ones buggedcomponent sets itself.

it appears properties set 'bugged' component lost, obviously, because component, essentially, discards rest-properties. me it's clear bug, not bad practice. i've taken @ github repos , see quite common practice , cannot find articles/guides state issue , point bad practice.

the argument not passing rest have it's not clear, where rest-props should passed. since react component can has 1 root, it's rather natural rest-props should passed it.

so, question is: really, unfortunatelly common, bad practice, or there explanation why discarding rest-properties right way develop react components?

it comes down how control on own child components dev intends hand out consumers. in case buggedcomponent generating child div , makes sense pass on rest properties it. however, if child have been more complex control allowing arbitrary attributes not make sense, there won't need passing them down. yours specific case need absolute control on class child control has, may not true in general scenario. example popular material-ui library, if @ complex control, minutely controls allowed props , never passes them down. make keeping inner-markup change-proof difficult, apart simplest of cases.