javascript - TypeError: (data || []).forEach is not a function

Question

I'm trying to render the data using ant design table but it doesn't work. I think it's because of the object key "children" in my response.

When I run my code I get the error: TypeError: (data || []).forEach is not a function

I would also like to note that I have uploaded csv file data without "children" column and it works perfectly.

My response:

import React, { useState } from "react";
import { parse } from "papaparse";
import _ from "lodash";
import { Upload, message, Button, Table, Input } from "antd";
import { UploadOutlined } from "@ant-design/icons";

export default function Home() {

  const [columns, setColumn] = useState([]);
  const [baseData, setBaseData] = useState([]);
  const [filterTable, setFilterTable] = useState(null);

  const props = {
    name: "file",
    accept: ".txt, .csv",
    headers: {
      authorization: "authorization-text",
    },
    async onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        const texts = await info.file.originFileObj.text();
        const results = parse(texts, {
          header: true
        });

        const col = _.keys(results.data[0]);

        const customCol = _.map(col, (value) => ({
          title: value,
          dataIndex: value,
          key: value.toLowerCase(),
        }));

        const data = results.data;
        
        console.log({ customCol });
        console.log({ data });

        setColumn(customCol);
        setBaseData(data);

        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div>
      <main>
        <Upload {...props}>
          <Button icon={<UploadOutlined />}>Click to Upload</Button>
        </Upload>

        <Table pagination={false} columns={columns} dataSource={filterTable == null ? baseData : filterTable} />
        
      </main>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

question from:https://stackoverflow.com/questions/65890189/typeerror-data-foreach-is-not-a-function

Answer 1

Ant design uses the children property in your data to display a tree structure in your table, and it accepts an array not a string, thus the error. You can tell the Table component to use a different name for this feature by using the childrenColumnName prop, like this :

<Table childrenColumnName="antdChildren" />

Read more about the table tree data structure here