Why am I getting the TypeError: _this.props.data is not a function

Question

I am using material-table to build a table of users from a call to my API. The data returns just fine in the console, but when I got to render it, I get an error. Here is an image of my error.

And my code:

import React, { useState, useEffect, useRef, Fragment } from 'react';
import axios from 'axios';
import { API } from '../../config';
import Layout from '../../components/Layout';
import MaterialTable from 'material-table';

const PendingUser = () => {
  const [pendingUser, setPendingUser] = useState({
    firstName: '',
    lastName: '',
    email: '',
    agency: ''
  });

  const isMountedVal = useRef(1);

  useEffect(() => {
    isMountedVal.current = 1;
    return () => {
      isMountedVal.current = 0;
    };

    getPendingUsers();
    setPendingUser(pendingUser);
  }, []);

  const getPendingUsers = async () => {
    const { data } = await axios.get(`${API}/admin/pendinguser`);
    await data.filter(user => {
      user.accountApproved ? setPendingUser(user) : setPendingUser();
      setPendingUser(user);
    });
  };

  const handleClick = (name, rowData, index, email) => e => {
    e.preventDefault();
    try {
      if (name === 'deny') {
        axios.delete(`${API}/admin/pendinguser/${name}/${rowData._id}`);
      } else {
        name === 'approve';
        axios.put(`${API}/admin/pendinguser/${name}/${rowData._id}`);
      }
    } catch (error) {
      console.log(error);
    }
  };

  const columns = [
    {
      title: 'First Name',
      field: 'firstName'
    },
    {
      title: 'Last Name',
      field: 'lastName'
    },
    {
      title: 'Email',
      field: 'email'
    },
    {
      title: 'Law Enforcement Agency',
      field: 'leAgency'
    },
    {
      title: 'Approve',
      field: 'approve',
      render: rowData => (
        <i
          className='far fa-check-circle fa-2x'
          style={{ color: 'green' }}
          onClick={handleClick('approve', rowData)}
        ></i>
      )
    },
    {
      title: 'Deny',
      field: 'deny',
      render: rowData => (
        <i
          className='far fa-times-circle fa-2x'
          style={{ color: 'red' }}
          onClick={handleClick('deny', rowData)}
        ></i>
      )
    },
    {
      title: 'Denial Reason',
      field: 'denialReason',
      render: rowData => (
        <select>
          <option value='Not Law Enforcement'>Not Law Enforcement</option>
          <option value='Non US Law Enforcement'>Non US Law Enfrocement</option>
        </select>
      )
    }
  ];

  console.log(pendingUser);



  return (
    <Layout>
      <MaterialTable
        title='Pending Users'
        columns={columns}
        data={pendingUser}
        isLoading={!pendingUser.length}
        options={{
          headerStyle: {
            backgroundColor: '#249DCD',
            color: 'white',
            fontWeight: 'bold'
          }
        }}
      />
    </Layout>
  );
};

export default PendingUser;

If I remove the data from the columns render just fine, but what is the point if I cant get the data to render.

Answer 1

Material Table requires data to be either an array or a function. You are instead setting it as an object. So material-table first checks if its an array, its not, so it assumes its a function and tries to invoke it, resulting in the above error.