Creare un Modal in React Bootstrap

Come si può evincere dal nome React Bootstrap è il porting per React di Bootstrap.

Oggi vediamo come creare un Modal; do per scontato l'installazione, ecc.

Partiamo creando all'interno del nostro progetto un componente apposito (file up_modal.js):

import * as React from "react";
import {Modal, Button} from 'react-bootstrap';

export default class UpdateModal extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal show={this.props.showModal}>
                <Modal.Header>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <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.props.onClose}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

Come vedete qui dentro usiamo due props, che gli andremo a passare dal componentente parent:

import React from 'react';

........

export default class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showModalUp: false
        };

        this.openModalUp = this.openModalUp.bind(this);
        this.closeModalUp = this.closeModalUp.bind(this);
    }

    openModalUp() {
        this.setState({showModalUp: true});
    }

    closeModalUp() {
        this.setState({showModalUp: false});
    }

    render() {
        return (
            <React.Fragment>
                <Container fluid="true" className="mt-4 mb-4">
                    <Row>
                        <button type="button" className="btn btn-sm btn-info" onClick={() => this.openModalUp}>
							Dettagli
            			</button>
                    </Row>
                </Container>

                <UpdateModal showModal={this.state.showModalUp} onClose={this.closeModalUp}/>
            </React.Fragment>
        )
    }

}

La prima props è lo stato (chiuso o aperto); la seconda è la funzione per la chiusura che risiede nel parent, e non nel child.

E' un concetto di base di React, che personalmente faccio fatica ad assimilare.

Sul forum html.it trovate il thread di riferimento che mi ha aiutato a capire questo concetto.

Enjoy!