I am trying to populate the data from my mock data which is in json format. When I am trying to run the component I am getting undefined reading map error. I have checked that my component is rendering with the value only. Even it's rendering with the value I am getting this undefined error. I have tried to applied conditional rendering but that doesn't help me. When I am trying to apply conditional rendering on createCells For Row, I am getting "Reference Error" Cell is not defined. "CreateCellsForRow" is making an issue I need to check whether it's getting an values or not if values are not there I need to return null. Could any one assist me what I am doing wrong. Thanks in advance.

const createCell = cell => ({ key: cell.key, children: cell.title });

//Actual code
const createCellsForRow = cells => cells.map(cell => createCell(cell)); -----> I am getting error from here(undefined reading map)

//applied conditional Rendering(getting cells is not defined reference error)
const createCellsForRow = cells.length > 0 ? cells => cells.map(cell => createCell(cell)) : null

const StTable = () => {
  const [selectedKey, setSelectedKey] = useState([]);

  const handleRowToggle = (event, metaData) => {
    event.preventDefault();
    if (selectedKey !== metaData.key) {
      setSelectedKey(metaData.key);
    }
  };

  const createRow = rowData => (
    {
      key: rowData.key,
      cells: createCellsForRow(rowData.cells),
      toggleAction: {
        metaData: { key: rowData.key },
        onToggle: handleRowToggle,
        isToggled: selectedKey === rowData.key,
        toggleLabel: rowData.toggleText,
      },
    }
  );

  const createRows = data => data.map(childItem => createRow(childItem));

  return (
    <Table
      summaryId="example-single-select"
      summary="This table shows an implementation of single row selection."
      numberOfColumns={4}
      cellPaddingStyle="standard"
      rowStyle="toggle"
      dividerStyle="horizontal"
      headerData={{
        selectAllColumn: {
          checkLabel: 'Single Selection',
        },
        cells: [
          { key: 'cell-0', id: 'toggle-0', children: 'Name' },
          { key: 'cell-1', id: 'toggle-1', children: 'Address' },
          { key: 'cell-2', id: 'toggle-2', children: 'Phone Number' },
          { key: 'cell-3', id: 'toggle-3', children: 'Email Id' },
        ],
      }}
      bodyData={[
        {
          rows: createRows(mockData),
        },
      ]}
    />
  );
};

export default StTable;

//MockDataSample
[
{"SNO":001, "SregID":"SOO1", "Status": "Available"},
{"SNO":002, "SregID":"SOO2", "Status": "Not Available"},
{"SNO":003, "SregID":"SOO3", "Status": "Available"},
]

CodePudding user response：

You need to add Array.isArray(cells) && cells.length > 0 to make sure cells is a array.

CodePudding user response：

You need to set array && array.length>0 condition before every map function. array check whether the array is available or not. (is array is not available then getting undefined)