0

I have a field in the Datagrid with renderCell. The Value i have to display will be fetched inside the AlertIssues-Component as the original Data just provides the uuid to fetch the corresponding data (issue amount). So props.row._id is use in AlertIssues with a hook to retrieve the issues of the Alert in this row.

  {
        field: "issues",
        type: "number",
        headerClassName: "iconHeader",
        // valueFormatter: params => {
        //   console.log("value formater",params )
        //   useGetIssueValue cannot be used here: (hook rules)
        //   let theValue =  useGetIssueValue(params.id)
        //   return theValue
        // },
        // useGetIssueValue cannot be used here: (hook rules)
        // valueGetter: params =>  useGetIssueValue(params.id)
        renderCell: (props: GridRenderCellParams<Number>) => {
         // useGetIssueValue is used inside AlertIssues 
         // and works to display the right amount
          return(
          <AlertIssues {...props}  />
        )},
      },
export const AlertIssues = (props: GridRenderCellParams<Number>) => {
  const { row } = props;
  // i am getting my amount here without trouble.
  // but it is just the displayed value ... 
  const alertIssueAmount = useGetIssueValue(row.id);
...
  return <>alertIssueAmount</>

i tried to use "valueGetter" or "valueFormatter" to get the amount i need. but inside these functions i am not allowed to call my useData-hook, as they are functions and not React-Components or Hooks.

the row itself does not have the value i got inside of AlertIssues...

i am very lost here, how can i retrieve my issueAmount-value from the hook and use it in Datagrid? (e.g. for filter and sort)

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
el-j
  • 11
  • 3

0 Answers0