Component is not rendering the if block inside the function

I am working on a task where I need to pass the data to the table. The table has its own data type and prop. I need to follow the same when I am applying the logic. Now I am trying to pass the data dynamically. For the header of the table values are populating as expected. But when I am trying to pass the data to table body I am not getting any values. Anyone can guide how to achieve this. I need to follow the Table props format when I am working with the table component. I have written down the table props, code and sample data. When I am seeing the console I am getting an error stating that check the render method of the table component.

My Code

const Table = ({mockData}) => {

function getHeadings(mockData) {
    return mockData[0].cells.map(heading => {
        return <HeaderCell key={heading.key}>{heading.headername}</HeaderCell> // this part is working fine
    })
}


function getRow(cells) {
    return cells.map(cell => {
        const {headername} = cell;
        if(Array.isArray(cell[headername])){
            return (
                <Cell key={cell.toString()}>
                    {
                        cell[headername].map(element => {
                            console.log("ELEMENT", element)----> This value is not coming(this if block is not working)
                            return <Badge intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell>{cell[headername]}</Cell>
    })
}

function getRows(mockData) {
    // console.log("GETROWS ROW", mockData)
    return mockData.map(row => {
        // console.log("GETROWS ROW", row.cells)
        return <Row key={row}>{getRow(row.cells)}</Row>
    })
return (
<>
<Table paddingStyle="compact">
  <Header>
    {getHeadings(mockData)}
  </Header>
  <Body>
    {getRows(mockData)}
  </Body>
</Table>

JSON Data

 [
    {
      "key": "row-0",
      "cells": [
        { "key": "cell-0", "headername":"Name", "CName": "Patient One" },
        { "key": "cell-1", "headername":"Reg ID","CID": "C- 001" },
        { "key": "cell-2", "headername":"Label","CLabel": ["In", "Out"] }

       
      ]
    }

]

Table Props:

1. Table PROPS- Prop: Children Type: Node default:[] (Desc: the child
    content for table consisting of eithera Table Header or Body)
      
 2. Table Header Props- Prop: Children Type: node default:[]

 3. Table Header Cell props - prop:children type:node default:[](Desc:
    content to display for column header)

 4. Table Row Props - Prop: Children Type: node default:[] (Desc: child
    table cells to be placed within the tr)

 5. Table Cell Props - Prop: Children Type: node default:[] (Desc:
    content to be displayed for row cell)

CodePudding user response：

Here Component name is similar to the element name . Here I'm talking about table elements.

You should have to change the name to something else.

https://www.geeksforgeeks.org/reactjs-functional-components/

https://youtu.be/dpw9EHDh2bM

Can you please tell me which framework you are using for this table?

CodePudding user response：

As all your cells contain only key, headername, and one other property, here's a janky way of fixing your issue without too much work

However ... key={cell.toString()} is not right either, as that will result in [object Object]

Perhaps you want key={key} instead

function getRow(cells) {
    return cells.map(cell => {
        const {key, headername, ...rest} = cell;
        const data = Object.values(rest)[0];
        if(Array.isArray(data)){
            return (
                <Cell key={cell.toString()}>
                    {
                        data.map(element => {
                            return <Badge intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell>{data}</Cell>
    })
}