React/Redux simple table throwing data.map is not a function TypeError

Question

I have a simple React table initiation which creates a TypeError: data.map is not a function. The table renders if i pass a simple Array into it (like [1,2,3]) instead of the certData variable which is an object.

I would like to render a table that has all distinct "Full Name"s from both cert and non_cert arrays in the left hand column and a list of "Alias"s who have them in the right hand column. So it would look like:

123 | ABC, DEC

789 | GHI

Here is the code i have right now

const TeamExpertiseTable = (props) => {
  const certData = props.teamCerts;
  console.log(certData);

  const columns = () => {
      return [
        {
          header: 'Certification Name',
          accessor: 'Cert Name'
        },
        {
          header: 'Team Members',
          accessor: 'Alias'
        }
      ]
  }

    return (
        <div>
            <Table
                activeSortID="Cert Name"
                columns={columns()}
                data= {certData}
                isStriped={true}
                shouldAutoCollapseOnExpand={false}
                sortDirection="ascending"
                spacing="default"
            />
        </div>
    );
}

where the certData object is as follows:

{
    "Count": 79,
    "cert": [
        {
            "Full Name": "ABC",
            "Alias": "ABC",
            "Cert Type": "ABC",
            "Cert Name": "123"
        },
                {
            "Full Name": "DEF",
            "Alias": "ABC",
            "Cert Type": "ABC",
            "Cert Name": "123"
        }
    ],
    [
     "non_cert": [
        {
            "Full Name": "GHI",
            "Alias": "ABC",
            "Cert Type": "ABC",
            "Cert Name": "789"
        }
    ]
}

Answer 1

The certData is an object, while the Table component expects an array, which contains a map method in its prototype. You can pass certData.cert or certData['cert']

Answer 2

You need to pass it an array and certData is an object in your case.

You should pass certData.cert or certData.non_cert :

return (
        <div>
            <Table
                activeSortID="Cert Name"
                columns={columns()}
                data= {certData.cert}
                isStriped={true}
                shouldAutoCollapseOnExpand={false}
                sortDirection="ascending"
                spacing="default"
            />
        </div>
    );

Answer 3

I assuming that you are looping over the cert property, in that case you will need to initialize teamCerts with an empty array or:

const certData = props.teamCerts.cert || [];

Answer 4

The certData is object, not Array value.

Please try this.

            <Table
                activeSortID="Cert Name"
                columns={columns()}
                data= {certData.cert}
                isStriped={true}
                shouldAutoCollapseOnExpand={false}
                sortDirection="ascending"
                spacing="default"
            />

And if you want cert and non cert data

let dataArray = [];
dataArray.push(certData.cert)
dataArray.push(certData.non_cert)
          
...

            <Table
                activeSortID="Cert Name"
                columns={columns()}
                data= {dataArray}
                isStriped={true}
                shouldAutoCollapseOnExpand={false}
                sortDirection="ascending"
                spacing="default"
            />

Answer 5

When you use type script you have to define about the object or array

type Cert = {
   "Full Name"?: string,
   "Alias"?: string,
   "Cert Type"?: string,
   "Cert Name"?: string
}

After that you can get the data with this type.

const ChildComponent = ({data}:Cert[]) = >{
   data.map((item, key)=>(
      <React.Fragment key={key}>
          {item.Full Name}
      </React.Fragment>

   ))
}

If there is any error, please let me know.