Cannot spread IButtonProps with react 16.8.5
See original GitHub issueEnvironment
- Package version(s): blueprint/core@2.1.1, React 16.8.5 (just upgraded from 16.3), typescript 3.3
Steps to reproduce
render() {
const {buttonProps} = this.props; // type is IButtonProps
<Button // compile error
{...buttonProps}
/>
}
Actual behavior
It looks like React.ButtonHTMLAttributes<T>
has narrowed the button type from string | undefined
to 'button' | 'submit' | 'reset' | undefined
Type '{} | { active?: boolean | undefined; alignText?: Alignment | undefined; elementRef?: ((ref: HTMLElement | null) => any) | undefined; fill?: boolean | undefined; large?: boolean | undefined; ... 10 more ...; className?: string | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<IButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> & Readonly<{ children?: ReactNode; }>'.
Type '{ active?: boolean | undefined; alignText?: Alignment | undefined; elementRef?: ((ref: HTMLElement | null) => any) | undefined; fill?: boolean | undefined; large?: boolean | undefined; ... 10 more ...; className?: string | undefined; }' is not assignable to type 'Readonly<IButtonProps & ButtonHTMLAttributes<HTMLButtonElement>>'.
Types of property 'type' are incompatible.
Type 'string | undefined' is not assignable to type '"button" | "submit" | "reset" | undefined'.
Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.
Expected behavior
No typescript compilation error
Possible solution
Use the same type as React for the type
attribute in IButtonProps
?
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Unable to use the spread operator after ejecting create-react ...
I used create-react-app to create a react application. After I run eject, I am unable to use the spread operator as follows:
Read more >Introducing Hooks - React
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. ... This...
Read more >type 'htmlelement' is not assignable to type 'reactnode'.
Possible solution. Use the same type as React for the type attribute in IButtonProps ? Open side panel ...
Read more >Useful React Hooks That You Can Use In Your Projects
Hooks must be called at the top level of a component, before the return statement. They can't be called inside a conditional statement,...
Read more >useState in React: A complete guide - LogRocket Blog
This tutorial covers the useState Hook in React, the equivalent of ... we can't just use the spread syntax to update the state...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
"@types/react": "^16.8.10",
https://github.com/DefinitelyTyped/DefinitelyTyped/commit/4d371be185ddd77264a8d7f30a7f7f8912738ed8#diff-96b72df8b13a8a590e4f160cbc51f40c
Fixed by https://github.com/palantir/blueprint/pull/3608