value not loading initially in datagrid

Question

I'm trying to fetch data using api and show the data in my datagrid. but initially the data is not loading. though I can get the data, and I don't know why it doesn't show in the datagrid. What I'm actually doing is, I have a common function for datagrid along with search option in one file. I'm getting the getting the data in another file. Now everytime I make a change and save the file, it shows the data, but when I refresh the page the data is not showing again. kindly help me figure out. Thanks in advance

this the code where I'm getting the data

    const columns = [
  { field: 'role', headerName: 'Role', },
  { field: 'counterParty', headerName: 'Counter Party', },
  { field: 'tokens', headerName: 'Token', },
  { field: 'date', headerName: 'Date', },
  { field: 'comment', headerName: 'Comments', }
];

export default function TransactionCard(props) {
  const [TransactionData, setTransactionData] = useState([]);
  const [loading, setLoading] = useState(true);

  // setLoading(loading, true);

  useEffect(() => {
    axios.get('http://localhost:8006/api/v2/user/transactions').then(function (res) {
      try {
        var result = res.data;
        // console.log(result.data.data)
        setTransactionData(result.data.data)
        // setLoading(false);
      }
      catch (error) {
        console.log(error)
      }
    })
  }, [])
  console.log(TransactionData)
  return (
    <>
      <Card {...props}>
        <CardContent>
          <DataGridHelper title='Transaction' rows={TransactionData} columns={columns} />
        </CardContent>
      </Card>
    </>
  );
}

This is Where I'm getting the data

    const DataGridHelper = ({ rows, columns, title }) => {
     const [platform, setPlatform] = useState([]);
     const [searchText, setSearchText] = useState('');
     const [Rows, setRows] = useState([]);

     useEffect(() => {
          setPlatform(rows);
          setRows(rows);
     }, []);

     console.log(Rows);
     function escapeRegExp(value) {
          return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     }
     const requestSearch = (searchValue) => {
          const searchRegex = new RegExp(escapeRegExp(searchValue), 'i');
          const filteredRows = platform.filter((row) => {
               return Object.keys(row).some((field) => {
                    return searchRegex.test(row[field].toString());
               });
          });
          setRows(filteredRows);
     };

     console.log(rows)
     return (
          <>
               <Stack direction="row" alignItems="center" justifyContent='space-between' gap={1}>
                    <Stack direction="row" alignItems="center" gap={1}>
                         <RuleIcon sx={{ color: "text.secondary" }} />
                         <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
                              {title}
                         </Typography></Stack>
                    <Box sx={{ flexDirection: 'column' }}>
                         <TextField
                              variant="outlined"
                              size='small'
                              value={searchText}
                              onChange={(e) => { setSearchText(e.target.value); requestSearch(e.target.value) }}
                              placeholder="Search..."
                              InputProps={{
                                   startAdornment: <SearchIcon fontSize="small" color="action" />,
                                   endAdornment: (
                                        <IconButton
                                             title="Clear"
                                             aria-label="Clear"
                                             size="small"
                                             style={{ visibility: searchText ? 'visible' : 'hidden', borderRadius: "57%", paddingRight: "1px", margin: "0", fontSize: "1.25rem" }}
                                             onClick={(e) => { setSearchText(''); setRows(platform) }}
                                        >
                                             <ClearIcon fontSize="small" color="action" />
                                        </IconButton>
                                   ),
                              }}
                              sx={{
                                   width: { xs: 1, sm: 'auto' }, m: (theme) => theme.spacing(1, 0.5, 1.5),
                                   '& .MuiSvgIcon-root': {
                                        mr: 0.5,
                                   },
                                   '& .MuiInput-underline:before': {
                                        borderBottom: 1,
                                        borderColor: 'divider',
                                   },
                              }}
                         />
                    </Box>
               </Stack>
               <div style={{ height: 250, width: '100%' }}>
                    <DataGrid
                         disableColumnMenu
                         rows={Rows}
                         columns={columns}
                         pageSize={10}
                         rowsPerPageOptions={[10]}
                    />
               </div>
          </>
     );
}
export default DataGridHelper

this is the data I'm getting initially

Answer 1

first of all, your code is so dirty :), i cant test your code cause its have your rest API and you don't name consoles, i just understand which one is result of axios, but i think your mistake is on useEffect depandecies in DataGridHelper you must write rows in it, and second maybe in useEffect when you get data in rest API you might write if condition for try in axios tell that if(!!result.data.data) then do that i think it must your problem

     useEffect(() => {
      setPlatform(rows);
      setRows(rows);
 }, [rows]);

and :

      useEffect(() => {
    axios.get('http://localhost:8006/api/v2/user/transactions').then(function (res) {
      try {
         if(!!res.data){
           var result = res.data;
           // console.log(result.data.data)
           setTransactionData(result.data.data)
           // setLoading(false);
         } 
  }
  catch (error) {
    console.log(error)
  }
})
  }, [])