react ag-grid table not displaying and shows an error

Question

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:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ConsultaNiños .

here is the code for the ConsultaNiños where everything all the others are:

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(
            <div>
                <div>{/*this is the sidebar*/}
                    <SideBar></SideBar>
                </div>

                {/**here is the table that i made in this same component*/}
                <div className='ag-theme-alpine-dark'style={{height:'600px'}}>
                    <AgGridReact
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
                    /> 
                </div>

                {/**this is the other table i want to display*/}
                <div>
                    <TablaDatosNiño></TablaDatosNiño>
                </div>
            </div>
        )
    }
}

export default ConsultaNiños

here is the code for the other table the component TablaDatosNiños :

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'
            },

it goes on like that with a lot of columns. Then here is the rowData and the render method:

rowData:[]
        }
    }

    render(){
        return(
            <div>
                {/**tabla con los datos del niño*/}
                <div className='ag-theme-alpine-dark'style={{height:'600px'}}>
                    <AgGridReact
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
                    /> 
                </div>
            </div>
        )
    }
}

export default ConsultaNiños

here is my app.js file:

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 (
      <Router>
        <div>
          <Switch>
            <Route exact path = '/' render = {pops => (
              <Fragment>
                <Login></Login>
              </Fragment>
            )}/>
            <Route exact path = '/Matriculacion' component = {Matriculacion}/>
            <Route exact path = '/Medicinas' component = {Medicinas}/>
            <Route exact path = '/Ingresos_Egresos' component = {IngEg}/>
            <Route exact path = '/Table' component={ConsultaNiños}/>
          </Switch>
        </div>    
      </Router>
    );
  }

}

export default App;

the route that opens the component is the /Table.

well i researched for this and found what could be a possibe solution by adding curly braces to the import of the {ConsultaNiños} but now it shows this error message:

Failed to compile./src/App.js Attempted import error: 'ConsultaNiños' is not exported from './layout/ConsultaNiños'.

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 ConsultaNiños 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.

i would be very grateful if you could help me <3

Answer 1

well what i was trying to do was to render everything in the same component i was trying to create the table. Aparently this is not valid because the grid configuration so i just made each table in a diferent component and related them in a third component in which i added both tables, this third component works as an intermediate between the tables and allow communication between the tables via props