CODEWITHSUNDEEP
javascriptreactjs
pmiranda
pmiranda

Reputation: 8420

React, handle modal from component

How can I catch the click on some buttom from a modal, to return true or false to the component that is calling the modal?

handleSubmitSaveConfigurations = async (row) => {
    const { scadaValidation } = this.props;

    const result = await scadaValidation(11);

    if (result.statusCode !== 200) {
        // Opens the modal to ask if you really want to save
        this.setState({openSimpleModal: true});
        this.setState({contentSimpleModal: this.warningModal()});
        // Here I have to catch if the modal click yes or no. 
        // In case yes, do nothing and continue with the code
        // But in case "no" returns false and stops
    }
    // If result.statusCode === 200 returns true
    return true;
}

warningModal = () => (
    <div>
        Do you want to save?
        <Button id="btnClose" onClick={() => this.handleModalClickClose()}>No</Button>
        <Button id="btnSave" onClick={() => this.handleModalClickClose()}>Yes</Button>
    </div>
);

handleModalClickClose = () => this.setState({ openSimpleModal: false });

Upvotes: 0

Views: 211

Answers (3)

pmiranda
pmiranda

Reputation: 8420

I want to share my solution, for sure I will need it in the future. it the implementation of @Dupocas

const Modal = ({ callback }) => {
    const handleClick = arg => callback(arg)

    return (
    <div>
        Wanna save?
        <Button id="btnCloseModal"      onClick={() => handleClick(0)}>No</Button>
        <Button id="btnGuardarConfirm"  onClick={() => handleClick(1)}>Sí</Button>
    </div>)
};

class TableDisplayReportRecord extends Component<Props, State> {

    constructor {...}

    handleValidate = async (row) => {

        const { scadaValidation } = this.props;

        const verify = await scadaValidation();

        if (verify.statusCode !== 200) {
            this.setState({openSimpleModal: true});

            const onModalClick = arg => {
                this.setState({openSimpleModal: false});
                //do nothing
                if (arg === 0) return false;
                //if user selected "Yes", call the function that I need
                else this.handleSubmitSave(row);

            };

            this.setState({contentSimpleModal:
                    <Modal
                        callback={onModalClick}
                    />
            })
        }
    }

    handleSubmitSave = async (row) => {...}

    ...

}

Upvotes: 0

Dupocas
Dupocas

Reputation: 21297

You could pass a handler to be executed inside your modal.

const Modal = ({ callback }) =>{
    const handleClick = arg => callback(arg)

    return(
        <div>
            <button  onClick={() => handleClick('button1')}>A</button>
             <button  onClick={() => handleClick('button2')}> B</button>
        </div>
    )
}

And expect to receive this value inside the component which is calling Modal

const TheOneWhoCalls = () =>{
    const onModalClick = arg => console.log(arg)

    return <Modal callback={onModalClick} />
}

Upvotes: 1

Haru
Haru

Reputation: 145

You can create a function on the parent component, and inside the modal, u only use it. https://reactjs.org/docs/lifting-state-up.html#lifting-state-up

Parent:

constructor () {
  this.state: {test: false}
}

setStateTest (value) {
  this.setState(value)
}

render () {
  return <modal handlerSetParentStateTest = {setStateTest}></modal>
}

Modal:

// this will set the parent state
this.props.handlerSetParentStateTest(true);

Upvotes: 0

Related Questions