javascript - Encapsulating material-ui into custom components -

i having bit of trouble material-ui table component. seperated table logic header , body component , within body, added different component each row

export const products = [   {category: 'sporting goods', price: '$49.99', stocked: true, name: 'football'},   {category: 'sporting goods', price: '$9.99', stocked: true, name: 'baseball'},   {category: 'sporting goods', price: '$29.99', stocked: false, name: 'basketball'},   {category: 'electronics', price: '$99.99', stocked: true, name: 'ipod touch'},   {category: 'electronics', price: '$399.99', stocked: false, name: 'iphone 5'},   {category: 'electronics', price: '$199.99', stocked: true, name: 'nexus 7'} ]  export const productcategoryrow = ({   product: {     name,     price     }   }) => (<tablerow>     <tablerowcolumn>       {name}     </tablerowcolumn>     <tablerowcolumn>       {price}     </tablerowcolumn>   </tablerow> )  const productheader = () => (<tableheader>     <tablerow>       <tableheadercolumn>         name       </tableheadercolumn>       <tableheadercolumn>         price       </tableheadercolumn>     </tablerow>   </tableheader> )  export const producttablebody = (props) => {   bin.log(props)   const products = props.products.map(product => (<productrow product={product} />))   console.log(products)   return products } 

the product table component composed of these components:

//this not work, components passed down children , nothing happens.   const producttable = (props) => (     <table>       <productheader/>       <producttablebody products={props.products}/>     </table>   ) 

i have webpack bin here can take at. have commented out producttable not work.

the <table> implementation relies on direct children having <tableheader>, <tablebody>, , optionally <tablefooter> component.

if not find @ least <tableheader> , <tablebody>, not render in header/body. happening in situation.

one way can around keep <tablebody> , <tableheader> <table>, use helper functions achieve similar level of abstraction desire.

const productcategoryrow = (props) => {     const { name, price } = props.product      return (         <tablerow>             <tablerowcolumn>               {name}             </tablerowcolumn>             <tablerowcolumn>               {price}             </tablerowcolumn>         </tablerow>     ) }   function createheadercolumns(columnnames) {     return columnnames.map(name => <tableheadercolumn>{name}</tableheadercolumn>) }  function createtablerows(rows) {     return rows.map(row => <productcategoryrow product={row} />) }  const producttable = (props) => {      const headercolumns = createheadercolumns(props.columnnames)     const tablerows = createtablerows(props.products)      return (             <table>                 <tableheader>                     <tablerow>                         {headercolumns}                     </tablerow>                 </tableheader>                 <tablebody>                     {tablerows}                 </tablebody>             </table>     ) }