question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot spread IButtonProps with react 16.8.5

See original GitHub issue

Environment

  • 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:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found