React.memo with typescript in react
up vote
0
down vote
favorite
I am using React.memo() in a .tsx file(React typescript)
Now I have declared an interface for Props as:
interface Props {
type?: string;
}
My component looks like:
const Component: React.SFC<Props> = props => {
/// return something;
};
export default memo(Component);
Now since type is an optional prop I intend to use it only sometimes.
If I use my component as <Component type="something" /> everything is okay.
But if I use it as <Component /> I get the error -->
Type '{ children: string; }' has no properties in common with type
'IntrinsicAttributes & Props'.
This seems to be a very absurd error as I have tried this on Code sandbox and everything works fine. Any ideas about what the error could be?
UPDATE
If I explicitly add a prop in interface like
interface Props {
type?: string;
children?: ReactNode;
}
then in that case everything works fine. This is supposed to be implicit but acc to the error its taking as
'{ children: string; }'
Any ideas???
reactjs typescript
asked Nov 22 at 15:19
Varun Sharma
13
add a comment |
up vote
0
down vote
favorite
I am using React.memo() in a .tsx file(React typescript)
Now I have declared an interface for Props as:
interface Props {
type?: string;
}
My component looks like:
const Component: React.SFC<Props> = props => {
/// return something;
};
export default memo(Component);
Now since type is an optional prop I intend to use it only sometimes.
If I use my component as <Component type="something" /> everything is okay.
But if I use it as <Component /> I get the error -->
Type '{ children: string; }' has no properties in common with type
'IntrinsicAttributes & Props'.
This seems to be a very absurd error as I have tried this on Code sandbox and everything works fine. Any ideas about what the error could be?
UPDATE
If I explicitly add a prop in interface like
interface Props {
type?: string;
children?: ReactNode;
}
then in that case everything works fine. This is supposed to be implicit but acc to the error its taking as
'{ children: string; }'
Any ideas???
reactjs typescript
asked Nov 22 at 15:19
Varun Sharma
13
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am using React.memo() in a .tsx file(React typescript)
Now I have declared an interface for Props as:
interface Props {
type?: string;
}
My component looks like:
const Component: React.SFC<Props> = props => {
/// return something;
};
export default memo(Component);
Now since type is an optional prop I intend to use it only sometimes.
If I use my component as <Component type="something" /> everything is okay.
But if I use it as <Component /> I get the error -->
Type '{ children: string; }' has no properties in common with type
'IntrinsicAttributes & Props'.
This seems to be a very absurd error as I have tried this on Code sandbox and everything works fine. Any ideas about what the error could be?
UPDATE
If I explicitly add a prop in interface like
interface Props {
type?: string;
children?: ReactNode;
}
then in that case everything works fine. This is supposed to be implicit but acc to the error its taking as
'{ children: string; }'
Any ideas???
reactjs typescript
asked Nov 22 at 15:19
Varun Sharma
13
I am using React.memo() in a .tsx file(React typescript)
Now I have declared an interface for Props as:
interface Props {
type?: string;
}
My component looks like:
const Component: React.SFC<Props> = props => {
/// return something;
};
export default memo(Component);
Now since type is an optional prop I intend to use it only sometimes.
If I use my component as <Component type="something" /> everything is okay.
But if I use it as <Component /> I get the error -->
Type '{ children: string; }' has no properties in common with type
'IntrinsicAttributes & Props'.
This seems to be a very absurd error as I have tried this on Code sandbox and everything works fine. Any ideas about what the error could be?
UPDATE
If I explicitly add a prop in interface like
interface Props {
type?: string;
children?: ReactNode;
}
then in that case everything works fine. This is supposed to be implicit but acc to the error its taking as
'{ children: string; }'
Any ideas???
reactjs typescript
reactjs typescript
asked Nov 22 at 15:19
Varun Sharma
13
asked Nov 22 at 15:19
Varun Sharma
13
edited Nov 23 at 8:50
asked Nov 22 at 15:19
Varun Sharma
13
asked Nov 22 at 15:19
Varun Sharma
13
asked Nov 22 at 15:19
Varun Sharma
13
13
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13
add a comment |
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53433989%2freact-memo-with-typescript-in-react%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
Have you tried to rename the prop? React.memo uses some prop called type.
– Stramski
Nov 22 at 17:05
codesandbox.io/embed/6lmwvxj0vk But it works in this sandbox.
– Varun Sharma
Nov 22 at 17:06
Plus I tried renaming. Didnt work
– Varun Sharma
Nov 22 at 17:13