title: react ag-grid table not displaying and shows an error
body: <p>what i want to do is to display a component that contains an ag-grid table, a side bar and an other component that is an other ag-grid table. well when i start the program it goes well at the begining but when the i go to the route where the component i told you should be displayed appears this error message:</p>
  
  <p>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>
  
  <p>Check the render method of <code>ConsultaNiños</code>.</p>
  
  <p>here is the code for the <code>ConsultaNiños</code> where everything all the others are:</p>
  
  <pre><code>import React, {Component} from 'react'
  import SideBar from './SideBar'
  import AgGridReact from 'ag-grid-react'
  import TablaDatosNiño from './TablaDatosNiño'
  import 'ag-grid-community/dist/styles/ag-grid.css';
  import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
  
  class ConsultaNiños extends Component{
      constructor(props){
          super(props)
          this.state={
              columnDefs:[{
                  headerName:'Nombre', field:'Nombres'
              }],
              rowData:null
          }
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;div&gt;{/*this is the sidebar*/}
                      &lt;SideBar&gt;&lt;/SideBar&gt;
                  &lt;/div&gt;
  
                  {/**here is the table that i made in this same component*/}
                  &lt;div className='ag-theme-alpine-dark'style={{height:'600px'}}&gt;
                      &lt;AgGridReact
                          columnDefs={this.state.columnDefs}
                          rowData={this.state.rowData}
                      /&gt; 
                  &lt;/div&gt;
  
                  {/**this is the other table i want to display*/}
                  &lt;div&gt;
                      &lt;TablaDatosNiño&gt;&lt;/TablaDatosNiño&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ConsultaNiños
  </code></pre>
  
  <p>here is the code for the other table the component <code>TablaDatosNiños</code>:</p>
  
  <pre><code>import React, {Component} from 'react'
  import AgGridReact from 'ag-grid-react'
  import 'ag-grid-community/dist/styles/ag-grid.css';
  import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
  
  class ConsultaNiños extends Component{
      constructor(props){
          super(props)
          this.state={
              columnDefs:[{
                  headername:'IDalumno',field:'idalumno'
              },{
                  headername:'Nombre',field:'nombre'
              },{
                  headername:'Fechadenacimiento',field:'fecha de nacimiento'
              },{
                  headername:'Horario',field:'horario'
              },
  </code></pre>
  
  <p>it goes on like that with a lot of columns. Then here is the rowData and the render method:</p>
  
  <pre><code>rowData:[]
          }
      }
  
      render(){
          return(
              &lt;div&gt;
                  {/**tabla con los datos del niño*/}
                  &lt;div className='ag-theme-alpine-dark'style={{height:'600px'}}&gt;
                      &lt;AgGridReact
                          columnDefs={this.state.columnDefs}
                          rowData={this.state.rowData}
                      /&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default ConsultaNiños
  </code></pre>
  
  <p>here is my app.js file:</p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import './App.css';
  import Login from './layout/login.js';
  import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
  import Matriculacion from './pages/Matriculacion';
  import Medicinas from './pages/Medicinas';
  import IngEg from './pages/IngEg';
  import ConsultaNiños from './layout/ConsultaNiños'
  
  
  
  
   class  App extends Component {
  
    render(){
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route exact path = '/' render = {pops =&gt; (
                &lt;Fragment&gt;
                  &lt;Login&gt;&lt;/Login&gt;
                &lt;/Fragment&gt;
              )}/&gt;
              &lt;Route exact path = '/Matriculacion' component = {Matriculacion}/&gt;
              &lt;Route exact path = '/Medicinas' component = {Medicinas}/&gt;
              &lt;Route exact path = '/Ingresos_Egresos' component = {IngEg}/&gt;
              &lt;Route exact path = '/Table' component={ConsultaNiños}/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;    
        &lt;/Router&gt;
      );
    }
  
  }
  
  export default App;
  </code></pre>
  
  <p>the route that opens the component is the /Table.</p>
  
  <p>well i researched for this and found what could be a possibe solution by adding curly braces to the import of the <code>{ConsultaNiños}</code> but now it shows this error message:</p>
  
  <p>Failed to compile
  ./src/App.js
  Attempted import error: 'ConsultaNiños' is not exported from './layout/ConsultaNiños'.</p>
  
  <p>well that message means that there should be an error on exporting the component but when i delete the curly braces in the import of <code>ConsultaNiños</code> and delete both of the tables in the component it works perfectly and with any export errors. meaning that the problem may be directly in the ag-grid tables components but the sintaxis seems having no mistakes so there is the problem.</p>
  
  <p>i would be very grateful if you could help me &lt;3</p>