ciao!

io ho questa classe che rappresenta un Modal:
codice:
import * as React from "react";
import {Modal, Button} from 'react-bootstrap';

export default class UpdateModal extends React.Component {

    constructor(props) {
        super(props);
        console.log(props);

        this.close = this.close.bind(this);
    }

    close() {
        this.setState({showModal: false});
    }

    render() {
        return (
            <Modal show={this.props.showModal} onHide={this.close}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {/*<h4>{this.state.upBookId}</h4>*/}
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                    <h4>Popover in a modal</h4>
                    <hr/>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.close}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}
nella finestra principale ho fatto così:
codice:
.........
import UpdateModal from './up_modal';


export default class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            books: [],
            showModal: false,
            upBookId: 0
        };

        this.open = this.open.bind(this);
    }

    open() {
        this.setState({showModal: true});
    }

    render() {
        return (
            <React.Fragment>
            
               <Button
                    bsStyle="primary"
                    bsSize="large"
                    onClick={() => this.open}
                >
                    Launch demo modal
                </Button>
                <UpdateModal show={this.state.showModal} />

            </React.Fragment>
        )
    }

}
il problema è che nn succede nulla.
non da ne errori ne apre la finestra.
idee??