[React] Problema con richiamo classe da button

[fermat]

ciao!

io ho questa classe che rappresenta un Modal:

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ì:

.........
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??

[m4rko80]

CIao, intanto puoi provare a settare direttamente true la propshow modal dalla Home e vedere se almeno appare. Il close dalla modale va a settare showModal del componente stesso ma in realtà la props sta nello state della home. Io sposterei quindi showModal nel componente stesso e gestire tutto da li. L'altrenativa è richiamare dal componente dialog la funzione per il cambio di showmodal (che starà in home)
PS
non ti serve avere 2 funzioni open/close, ne basterebbe una per invertire lo stato tipo:

this.setState({showModal: !this.state.showModal})

[fermat]

ciao!

si in effetti quelle funzioni sono ridondanti, le sistemo.

per il modal, se faccio così si vede subito:

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={true} 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>
        );
    }
}

quindi direttamente nella classe.

ma se lo metto solo qui, dove lo dovrei richiamare, non funziona:

<UpdateModal show={true}/>

[fermat]

certo, capito l'errore:

<UpdateModal showModal={this.state.showModal}/>

passavo il nome della props sbagliata (show) rispetto a quella che cercavo nel modal (showModal).

adesso funziona!

[fermat]

ho un altro problema del quale mi sono accorto adesso:

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

export default class UpdateModal extends React.Component {

    constructor(props) {
        super(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>
        );
    }
}

in pratica non si chiude.
ma non capisco dove sto sbagliando.

[M4V1]

showModal è nello state della classe madre non di quella del modal (che non ha lo stato).

In questo caso nelle props ti dovresti passare la funzione close() che però dovresti dichiarare nella classe madre.

Con React sono alle prime armi anche io, quindi spero di non averti detto una castronata

[m4rko80]

Ciao, se la funzione per variare lo stato sta nel parent la puoi passare come paramtro

<my-modal-component onClose="this.onClose" ....../>

this.onClose è la tua funzione del parent, quella che modifica l'effettivo showModal

In my-modal component

<button onClick="this.prop.onClose" ..../>

[fermat]

perfetto, era come dicevate voi.

unica cosa, la parentesi al posto delle virgolette nel passaggio delle props:

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