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)