title: not able to fetch data through api in material table react
body: <p>I am trying to fetch data throught api in material react table but its showing me an error as follows
  Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app</p>
  
  <p>code is mentioned below: </p>
  
  <pre><code>    import React, { Component } from 'react';
      import MaterialTable from "material-table";
      import withStyles from "@material-ui/core/styles/withStyles";
      import { makeStyles } from '@material-ui/core/styles';
  
      import ReactTable from 'react-table'
      import api from '../../api'
  
      import { Button } from 'react-floating-action-button'
  
      import "@fortawesome/fontawesome-free/css/all.min.css";
      import "bootstrap-css-only/css/bootstrap.min.css";
      import "mdbreact/dist/css/mdb.css";
  
      import {
      MDBBtn,
      } from "mdbreact";
  
      import "react-table/react-table.css";
  
      import styled from 'styled-components'
  
      import 'react-table/react-table.css'
      import { whiteColor } from 'assets/jss/material-dashboard-react';
      import { createSourceConfiguration } from '../../components/UserForm/SourceDatasetSelection';
      import { grayColor } from 'assets/jss/material-dashboard-react';
  
  
  
      const styles = {
                       cardCategoryWhite: {
          color: "rgba(255,255,255,.62)",
          margin: "0",
          fontSize: "14px",
          marginTop: "0",
          marginBottom: "0"
          },
        cardTitleWhite: {
        color: "#FFFFFF",
        marginTop: "0px",
        minHeight: "auto",
        fontWeight: "300",
        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
        marginBottom: "3px",
        textDecoration: "none"
      }
     };
  
      class MoviesList extends Component {
  
        constructor(props) {
          super(props)
          this.state = {
              movies: [],
              columns: [],
              isLoading: true,
           }
       }
  
       componentDidMount = async () =&gt; {
          this.setState({ isLoading: true })
  
          await api.getAllMovies().then(movies =&gt; {
              this.setState({
                  movies: movies.data.data,
                  isLoading: false,
  
                })
            })
        }
  
  
  
       render() {
  
  
  
      const { movies, isLoading } = this.state
          console.log('TCL: Configuration List -&gt; render -&gt; movies', movies)
         // const { movies, isLoading } = this.state
  
  
      const [state, setState] = React.useState({
  
  
       columns: [
        {
          title: "Dataset Name",
         // field: "dataset",
          accessor: 'configname',
         // type: "String",
  
           headerStyle: { fontSize: 20,backgroundColor:grayColor},
          cellStyle: {fontSize: 18},
  
          }
        ]
  
       });
          return (
         &lt;div style={{ maxWidth: "100%" }}&gt;
           &lt;MaterialTable
          title=''
          columns={state.columns}
          data={state.data}
  
  
            editable={{
             onRowAdd: newData =&gt;
              new Promise(resolve =&gt; {
                setTimeout(() =&gt; {
                  resolve();
                  const data = [...state.data];
                  data.push(newData);
                  setState({ ...state, data });
                }, 600);
              }),
              onRowUpdate: (newData, oldData) =&gt;
              new Promise(resolve =&gt; {
                setTimeout(() =&gt; {
                  resolve();
                  const data = [...state.data];
                  data[data.indexOf(oldData)] = newData;
                  setState({ ...state, data });
                }, 600);
              }),
              onRowDelete: oldData =&gt;
               new Promise(resolve =&gt; {
                setTimeout(() =&gt; {
                  resolve();
                  const data = [...state.data];
                  data.splice(data.indexOf(oldData), 1);
                  setState({ ...state, data });
                }, 600);
              })
             }}
  
  
  
           /&gt;
         &lt;/div&gt;
        );
  
      }
    }
  
    export default MoviesList
    //export default withStyles(styles)(Dataset);
  </code></pre>