How to use React-bootstrap Modal with typescript

Question

I am using react, react-bootstrap and typescript. I get the following error:

JSX element type 'Modal' does not have any construct or call signatures. TS2604

The code is pretty boilerplate from the react-bootstrap website which works if I use javascript:

import React, { Component } from "react";
import Modal from 'react-bootstrap';

class InfoModal extends Component{
    state = { show: true }

    render(){
     <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal! 
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    }
}

Steve · Accepted Answer · 2020-05-01 06:23:28Z

2

There were a few issues so I hope this helps anyone with the same issue:

The import was wrong it should have been: import { Modal, Button } from 'react-bootstrap';
onHide={() => { this.handleClose() }}

answered May 1, 2020 at 6:23

Steve

50.6k4 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Otu Over a year ago

Would be nice to add ModalProps or have the component props type extend it so one can leverage all the other props that come with the Modal component

Collectives™ on Stack Overflow

How to use React-bootstrap Modal with typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related