score:1

Accepted answer

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

if it does not find at least a <tableheader> and a <tablebody>, then it simply does not render anything in its header/body. this is what is happening in your situation.

one way you can get around this is to keep the <tablebody> and <tableheader> with the <table>, but use some helper functions to achieve a similar level of abstraction you 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>
    )
}

Related Query

More Query from same tag