I am trying to implement sorting on a table and am getting an error of:
(property) direction?: "asc" | "desc"
No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { action?: Ref<ButtonBaseActions>; ... 10 more ...; TouchRippleProps?: Partial<...>; } & CommonProps<...> & Pick<...>): Element', gave the following error.
Type 'string' is not assignable to type '"asc" | "desc"'.
Overload 2 of 3, '(props: { component: ElementType<any>; } & { active?: boolean; direction?: "asc" | "desc"; hideSortIcon?: boolean; IconComponent?: ComponentType<{ className: string; }>; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
Type 'string' is not assignable to type '"asc" | "desc"'.
Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<TableSortLabelTypeMap<{}, "span">>>): Element', gave the following error.
Type 'string' is not assignable to type '"asc" | "desc"'.ts(2769)
import {
Badge,
Box,
Drawer,
IconButton,
Table,
TableBody,
TableCell,
TableContainer,
TableSortLabel,
TableHead,
TableRow,
Tooltip
} from "@material-ui/core";
import { useEffect, useState } from "react";
function TeamsTableImpl({
a
}: {
a:number
}) {
const [orderDirection, setOrderDirection] = useState('asc')
const [valueToOrderBy, setValueToOrderBy] = useState('team')
const handleRequestSort = (event: any, property: any) => {
const isAscending = (valueToOrderBy === property && orderDirection === 'asc')
setValueToOrderBy(property)
setOrderDirection(isAscending ? 'desc' : 'asc')
}
const createSortHandler = (property: any) => (event: any) => {
handleRequestSort(event, property)
}
console.log(orderDirection);
console.log(typeof(orderDirection));
const myorderDirection = "desc";
console.log(typeof(myorderDirection))
return (
<Box>
<TableContainer style={{ marginTop: 32 }}>
<Table>
<TableHead>
<TableRow>
<TableCell>
Team
<TableSortLabel
active={valueToOrderBy === "team"}
// for some reason when orderDirection is passed as a state, this does not compile, even
// though the state value is a string that says 'desc' or 'asc', but if you hard code
// a string in the ternary operator, even if it shows the same value and type, it works correctly.
// need to investigate further.
direction = { valueToOrderBy === 'team' ? orderDirection : 'asc' }
onClick={createSortHandler("team")}>
Team
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
</Box>
);
}
As stated in the code, if orderDirection is passed as a state the error above shows, I have verified that the typeof(orderDirection) is a string. When I set a new variable called myorderDirection to the same string that the state orderDirection is, it works, it just does not work when the state is passed.
I am out of ideas why this might be.
Here are the versions of react and material-ui I am using.
"@material-ui/core": "^4.11.3",
"react": "^17.0.1"
CodePudding user response:
Just enforce the type of your state : useState<'asc'|'desc'>('asc')
. This way orderDirection
will be 'asc'|'desc'
instead of the infered string
.
CodePudding user response:
const [orderDirection, setOrderDirection] = useState<any>('asc')
or
const [orderDirection, setOrderDirection] = useState<'asc'|'desc'>('asc')
this would work