0
votes

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!

1
I copy & pasted your code and I'm not seeing any errors. First make sure that your rsuite package is up to date with the latest version (4.9.3). If that doesn't fix it then see if you can create a CodeSandbox that reproduces the issue.Linda Paiste

1 Answers

0
votes

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!