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>
)
}
Source: stackoverflow.com
Related Query
- Encapsulating material-ui into custom components
- How to add custom components into Ant Design stepper?
- Custom components based on Material UI and React
- How to import styles into React for Material Components for Web
- I wish to seperate Appbar and Drawer into two components - Material UI
- How to config webpack or nextjs to create css file from material custom styles and then inject it into header
- Adding custom components into Material-ui Select
- How to style components using makeStyles and still have lifecycle methods in Material UI?
- React Material UI - Export multiple higher order components
- React-Select - Replacing Components for custom option content
- Injecting react-intl object into mounted Enzyme components for testing
- React Material UI: How to give a button a custom color when disabled?
- react-router-dom get id from route with custom components and extra path
- How to use SCSS variables into my React components
- Swiper React | How to create custom navigation/pagination components using React refs?
- Material UI tooltip doesn't display on custom component, despite spreading props to that component
- How to apply custom theme in material ui
- Integrates react-route Links into Material UI list
- can we attach click handlers to custom child components
- Material UI: Place a space between two Typography components
- How to create custom React Native components with child nodes
- How to handle global state data into deeply nested components in Redux?
- How to use Material UI custom theme in React with Typescript
- Material UI Autocomplete custom renderInput
- Dropdown with custom input in material ui
- Material UI TextField Custom Attribute
- How to add custom font weights to Material UI?
- How to import other types into my TypeScript custom declarations file?
- Can I create a custom component library NPM package out of Material UI?
- Use components from two versions of the same library (npm / Material UI in my case)
More Query from same tag
- React useEffect forces me to add dependencies that trigger an infinite loop
- 500 internal server error on request to Node server from React client
- Update attachment Rails Active Storage
- React Dom not updating after updating a state array
- Dispatch actions the proper way
- Get the current route name into the component
- My useState hook isn't working in a specific portion of my code, but it's working everywhere else. Why is this happening despite using identical code?
- Hide Something in Video in React
- IntegrityError when sending multiple post requests
- How can I update Material UI theme dynamically via Redux store?
- graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site
- Functional component error: Parsing error: Unexpected token, expected ","
- How to update state in react js with spread operator?
- setTimeout causes TypeError: Object(...) is not a function
- reactjs firebase authentication update profile does not refresh
- Django React Python Post Request Image Classification
- Type error on a React component created with forwardRef
- Trying to use ReactCSSTransitionGroup for a Singleton
- Using REACT ROUTER 4 nested Routes are coming blank
- When and how are React lifecycle methods called in the NextJS SSR process?
- map an array with index keys to return a list of items react JS
- react router this.props.location
- WebSocket connection to 'ws://.../socket.io/' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
- Wait for API data before render react hooks
- How To Count Number of Documents in a Collection in Firebase Firestore With a WHERE query in react.js
- React and Emotion: Specify font size
- useCallback Hooks getting old state values and not updating
- Can this forwardRef be moved into a function for reusability?
- Show local images in React-Native NativeBase
- only allow children of a specific type in a react component