What is causing these TypeScript Element errors with this array of React components

1 answer

Can anyone please advise on what is causing and how to fix the following TypeScript errors I am getting with an array of returned Button components. Here is the relevant Button component code:-

type type = 'primary' | 'secondary' | 'tertiary' | 'tertiary_variant'; type size = 'base' | 'small' | 'micro';  type Props = typeof Button.defaultProps & {     type: type;     size: size;     className: string;     disabled: boolean;     busy: boolean;     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;     children: any;     attributes: any;     submitButton: boolean; };  type ButtonRipple = {     top: number;     left: number;     id: string; }  type State = {   ripples: ButtonRipple[]; }  class Button extends Component<Props, State> {     static defaultProps = {         type: 'primary',         size: 'base',         className: null,         disabled: false,         busy: false,         attributes: {},         submitButton: false     };     private readonly buttonRef: React.RefObject<unknown>;     constructor(props: Props) {         super(props);         this.buttonRef = React.createRef();          this.state = {             ripples: []         };     }.... 

Here is the function from the parent component that returns the Buttons:-

generateButtons = (): Button[] => {              return [ 254         <Button                 key="cancel"                 type="tertiary"                 onClick={this.props.onClose}                 attributes={{                                     'aria-label': 'Cancel'                 }}             >                 Cancel             </Button>, 265         <Button                 key="submit"                 onClick={this.handleSubmit}                 attributes={{                                        'aria-label': 'Submit'                 }}                 className={styles.submitButton}             >                 Submit             </Button>                    ];     }; 

And here are the errors:-

Error:(254, 13) TS2740: Type 'Element' is missing the following properties from type 'Button': buttonRef, handleClick, createRipple, render, and 5 more. Error:(265, 13) TS2322: Type 'Element' is not assignable to type 'Button'. 

Thanks,

Sam

All answers to this question, which has the identifier 60858289

The best answer:

The root cause of your problem is that <Button .../> is not an instance of Button, instead it's a JSX.Element. If you need a reference to a Button to access its methods, you can use the ref mechanism in React.

To explain why the errors are so cryptic, typescript allows assigning objects of one class to references of another, as long as their interfaces match. In your case JSX.Element doesn't implement all requirements for the Button interface.

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data