I am learning development in TypeScript and React. I'm using rsuite for graphical components - so far, I have used plenty of components from this suite without an issues. But now I am trying to create a modal dialog and cannot figure out how to use the Modal.* components in my setup.
I have tried every suggestion I was able to find, triple checked my import and syntax and everything seems to me like it should be working, but I am getting the error message "JSX element type 'Modal.Header' does not have any construct or call signatures.". Rsuite claims it fully supports typescript and react 16+ and other components from this library are working fine, so I am pretty sure the error is somewhere on my side.
Here is the component in question:
import React, { Component } from 'react';
import { Modal, Button } from 'rsuite';
class GroupTransactionDialog extends Component<any> {
render() {
return <div className="modal-container">
<Modal open={true} onClose={this.props.onClose}>
<Modal.Header>
<Modal.Title>Modal Title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p></p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onClose} appearance="primary">Save</Button>
<Button onClick={this.props.onClose} appearance="subtle">Cancel</Button>
</Modal.Footer>
</Modal>
</div>
}
}
export default GroupTransactionDialog;
The error looks like this:
TypeScript error in /home/johny/Developement/Js/finance2/src/components/GroupTransactionDialog.tsx(9,18):
JSX element type 'Modal.Header' does not have any construct or call signatures. TS2604
7 | return <div className="modal-container">
8 | <Modal open={true} onClose={this.props.onClose}>
> 9 | <Modal.Header>
| ^
10 | <Modal.Title>Modal Title</Modal.Title>
11 | </Modal.Header>
12 | <Modal.Body>
Any help is greatly appreciated!
I figured out, thanks to Linda Paiste's comment that I was using rsuite 5.0.0 alpha version instead of the stable one. After reisntalling with 4.9.3, modal started working as expected!