TypeScript react – JSX element type ‘Modal.Header’ does not have any construct or call signatures

  javascript, modal-dialog, reactjs, rsuite, typescript

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!

Source: Ask Javascript Questions

LEAVE A COMMENT