CODEWITHSUNDEEP
reactjstypescriptmaterial-uimobx-react
Rbell1997
Rbell1997

Reputation: 51

Material UI Datagrid data not populating

I'm encountering an issue that I'm struggling to get to the bottom of. I am utilizing the Material UI Datagrids, but I cannot seem to get it to populate with data, and I cannot understand why. When I look at my Component profiler, I can see the data I'm trying to display is there, so I cannot understand why there are no rows.

I am getting my data from my Express Server in my Management Component using useEffect(), which then feeds down to my EventTable component. My state is being stored in a MobX store which you can see I am deconstructing at the top of each component. I am relatively new to React so still getting used to the patterns, perhaps I'm missing something stupid? Below is some key snippets.

EventTable Component

import React from 'react'
import { useStore } from '../../../Stores/store';
import { DataGrid, GridActionsCellItem, GridColDef, GridRowParams, GridRowsProp } from '@mui/x-data-grid';
import { Edit } from '@mui/icons-material';

export default function EventTable() {
    const { generalStore} = useStore();
    const { events, setSelectedEvent } = generalStore;

    let rows: GridRowsProp = [...events];

    const columns: GridColDef[] = React.useMemo(() => [
        { field: 'name', headerName: 'Title', flex: 1},
        { field: 'date_time', headerName: 'Date', flex:1 },
        
        ], []);

    return (
        <DataGrid rows={rows} columns={columns} autoPageSize={true} autoHeight={true} />
    )
}

Management Component

import React, { useEffect } from 'react'
import { useStore } from '../../Stores/store'
import EventForm from './EventForm/EventForm';
import EventTable from './EventForm/EventTable';
import './Management.css'
import NewsForm from './NewsForm/NewsForm';

export default function Management() {
    const { generalStore } = useStore();
    const { haveNewsAndEvents, getNewsAndEvents, updateHaveNewsAndEvents, setIsManagement } = generalStore;


    useEffect(() => {
        setIsManagement(true);
        if(!haveNewsAndEvents){
            getNewsAndEvents();
            updateHaveNewsAndEvents(true);
        } 
    }, [haveNewsAndEvents]);

    return (
        <div >
            <div className="paper">
                <div className="newsEventForm">
                    <h2>Event Management</h2>
                    <EventForm />
                    <EventTable />
                </div>
                <div className="newsEventForm">
                    <h2>News Management</h2>
                    <NewsForm />
                </div>
            </div>
        </div>
    )
}

Any help is most appreciated

Upvotes: 0

Views: 2366

Answers (1)

Serhii Yukhnevych
Serhii Yukhnevych

Reputation: 299

I think you might have a problem with data flow. First of all, this is an assumption, cause I don't see the complete picture.

getNewsAndEvents();
updateHaveNewsAndEvents(true);

Here I assume that getNewsAndEvents action triggers an asynchronous call and looks like you are setting haveNewsAndEvents in the next line immediately after the call. So the Management component is rendered without events.

It can be solved by moving updateHaveNewsAndEvents after the call is completed.

Or you can do following:

export default function EventTable() {
  const [rows, setRows] = useState([]);
  const { generalStore} = useStore();
  const { events, setSelectedEvent } = generalStore;
  let rows = [];

  useEffect(() => setRows([...events]), [events]);

  return (
    <DataGrid rows={rows} columns={columns} autoPageSize={true} autoHeight={true} />
)
}

The problem with EventTable component is that it didn't react to the state changes.

Upvotes: 2

Related Questions