Using a Link component with ListItem and Typescript
0
I'm using material-ui v3.5.1
I want to make ListItem use the Link component like so:
<ListItem component={Link} to="/some/path">
<ListItemText primary="Text" />
</ListItem>
but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:
The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"
Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]
Is there a workaround to get things like these to work with Typescript?
Thanks!
reactjs typescript material-ui material-ui-next
edited Nov 19 '18 at 15:12
Niladri
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
add a comment |
0
I'm using material-ui v3.5.1
I want to make ListItem use the Link component like so:
<ListItem component={Link} to="/some/path">
<ListItemText primary="Text" />
</ListItem>
but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:
The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"
Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]
Is there a workaround to get things like these to work with Typescript?
Thanks!
reactjs typescript material-ui material-ui-next
edited Nov 19 '18 at 15:12
Niladri
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
add a comment |
0
0
0
I'm using material-ui v3.5.1
I want to make ListItem use the Link component like so:
<ListItem component={Link} to="/some/path">
<ListItemText primary="Text" />
</ListItem>
but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:
The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"
Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]
Is there a workaround to get things like these to work with Typescript?
Thanks!
reactjs typescript material-ui material-ui-next
edited Nov 19 '18 at 15:12
Niladri
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
I'm using material-ui v3.5.1
I want to make ListItem use the Link component like so:
<ListItem component={Link} to="/some/path">
<ListItemText primary="Text" />
</ListItem>
but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:
The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"
Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]
Is there a workaround to get things like these to work with Typescript?
Thanks!
reactjs typescript material-ui material-ui-next
reactjs typescript material-ui material-ui-next
edited Nov 19 '18 at 15:12
Niladri
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
edited Nov 19 '18 at 15:12
Niladri
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
edited Nov 19 '18 at 15:12
Niladri
3,68021427
edited Nov 19 '18 at 15:12
Niladri
3,68021427
edited Nov 19 '18 at 15:12
Niladri
3,68021427
3,68021427
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
asked Nov 19 '18 at 13:44
Torsten UhlmannTorsten Uhlmann
46039
46039
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
function SomePathLink(props: ButtonBaseProps) {
return <Link to="/some/path" {...props} />
}
<ListItem component={SomePathLink}>
<ListItemText primary="Text" />
</ListItem>
More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={/events/${eventId}} {...props as LinkProps} /> }
– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375964%2fusing-a-link-component-with-listitem-and-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
function SomePathLink(props: ButtonBaseProps) {
return <Link to="/some/path" {...props} />
}
<ListItem component={SomePathLink}>
<ListItemText primary="Text" />
</ListItem>
More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={/events/${eventId}} {...props as LinkProps} /> }
– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
add a comment |
1
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
function SomePathLink(props: ButtonBaseProps) {
return <Link to="/some/path" {...props} />
}
<ListItem component={SomePathLink}>
<ListItemText primary="Text" />
</ListItem>
More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={/events/${eventId}} {...props as LinkProps} /> }
– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
add a comment |
1
1
1
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
function SomePathLink(props: ButtonBaseProps) {
return <Link to="/some/path" {...props} />
}
<ListItem component={SomePathLink}>
<ListItemText primary="Text" />
</ListItem>
More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
function SomePathLink(props: ButtonBaseProps) {
return <Link to="/some/path" {...props} />
}
<ListItem component={SomePathLink}>
<ListItemText primary="Text" />
</ListItem>
More detailed explanation in the docs: https://material-ui.com/demos/buttons/#third-party-routing-library
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
answered Nov 19 '18 at 13:58
epsilonepsilon
1,03269
1,03269
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={/events/${eventId}} {...props as LinkProps} /> }
– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
add a comment |
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={/events/${eventId}} {...props as LinkProps} /> }
– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={
/events/${eventId}} {...props as LinkProps} /> }– Torsten Uhlmann
Nov 19 '18 at 14:50
Thanks, that worked. I had to cast the ButtonBaseProps into LinkProps though: const SomePathLink = (eventId: string) => (props: ButtonBaseProps) => { return <Link to={
/events/${eventId}} {...props as LinkProps} /> }– Torsten Uhlmann
Nov 19 '18 at 14:50
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
What was the error? You should not cast this since this might cause runtime issues.
– epsilon
Nov 19 '18 at 15:07
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
If I do not cast: "{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; component?: string | ... 2 more ... | undefined; ... 274 more ...; to: string; }" cannot be assigned to type "Readonly". property "innerRef" not comp. The type "((instance: any) => void) | RefObject | null | undefined" cannot be assigned to type "((node: HTMLAnchorElement | null) => void) | undefined". "null" cannot be assigned to "((node: HTMLAnchorElement | null) => void) | undefined". [2322]"
– Torsten Uhlmann
Nov 20 '18 at 13:20
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375964%2fusing-a-link-component-with-listitem-and-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
