Mapping json data in ReactJS

Question

I'm having a hard time mapping data children to a table. What you see in my json data below is an example of one item. I have a map in the Card component (See the render function content) to display as many items as I have independently in a MaterialUI Card. And Each card has also a table. I am mapping the table content with the children (rows) in each item. Because not every item has the same amount of data or same data.

My Cards are being populated just fine with the image, page, and section. But my rows content are not being populated in the table rows (TableRowColumn)

Here is the simplified json with one item:

exports.administration = [
    {
        id:'1',
        image: '/assets/images/media/christopher-walken.jpg',
        page: '',
        section: 'Test one',
        rows: [
            {
                id:'1.1',
                type: 'STRING',
                name: 'Page1Var1',
                description:'n/a',
                show:'Both',
                label: 'Page1Var1',
                value: 'Test one',
                presentation: 'n/a',
                lines: '1',
                characters: '4096',
            },
        ],

    },
]

The database declaration and call

const TEMPLATEITEMS = require('data/templates.js');
const administrationData = TEMPLATEITEMS['administration'];

In my render function:

{administrationData.map((row, index) => (
    <Card key={index}>
        <CardText>
            <div> 
                 //these are working fine
                 <h4>{row.page} / {row.section}</h4> 
                 <img src={row.image} alt={row.name} /> 
            </div> 
            <Table>
                <TableBody>
                    //these are not working. I tried several variations as you see below
                    <TableRow id={row.rows.id}>
                        <TableRowColumn> {row.type} </TableRowColumn>
                        <TableRowColumn> {row[index].rows.name} </TableRowColumn>
                        ...
                        <TableRowColumn> {rows.characters} </TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>
        </CardText>
    </Card>         
))}

Thank you in advance guys!

Answer 1

const tableRows = (row) => (
 row.rows.map((r, ix) => <TableRow id={r.id}>
    <TableRowColumn> {r.type} </TableRowColumn>
    <TableRowColumn> {r.name} </TableRowColumn>
    <TableRowColumn> {r.characters} </TableRowColumn>
    </TableRow>
    )
)

and then:

<TableBody> {tableRows(row)} </TableBody> 

Untested, but hopefully not too far off.

Answer 2

{administrationData.map((row, index) => (
    <Card key={index}>
    <CardText>
        <div>
             <h4>{row.page} / {row.section}</h4> 
             <img style={styles.image} src={row.image} alt={row.name} /> 
        </div> 
        <Table>
            <TableBody>
                {
                    row.rows.map((item, itemIndex)=>{
                       return(
                           <TableRow id={item.rows.id} index={itemIndex}>
                               <TableRowColumn> {item.type} </TableRowColumn>
                               <TableRowColumn> {item.name}</TableRowColumn>
                               ...
                               <TableRowColumn> {item.characters}</TableRowColumn>
                           </TableRow>
                       );
                    })
                } 
            </TableBody>
        </Table>
    </CardText>
  </Card>         
))}