Get bootstrap modal close event in reactjs

Question

I am using React 16 with Bootstrap 4. I am using bootstrap modal to display some values. I need to reset these values whenever modal is closed.

For Modal I have created a separate component. I dont want to use React-Modal as I get all the functionality in the current modal.

I know in plain javascript it is achieved using below code:

$(".modal").on("hidden.bs.modal"){
    //reset values here
};

But I dont know how this is achieved in ReactJS?

Below is my code for modal:

<div className="modal fade modal-flex" id="large-Modal-OneUser" tabIndex={-1} role="dialog">
            <div className="modal-dialog modal-lg" role="document">
                <div className="modal-content">
                    <div className="modal-header" style={{display: 'block'}}>
                        <div className="row">
                            <div className="col-md-6">
                                <h2 style={{fontWeight:600}}>{newTimelineData.length > 0 ? newTimelineData[0].candidateName : ""}</h2>
                            </div>
                            <div className="col-md-6">
                                <span style={{display: 'inline-flex',alignItems: 'center',float:'right'}}><h4 style={{paddingRight:20}}>{isNotEmpty(this.state.scheduledFor) ? moment(this.state.scheduledFor).format("DD-MMM-YYYY"):this.checkScheduledFor(newTimelineData)}</h4>
                                    <h3 style={{paddingRight: 10}}>{isNotEmpty(this.state.probability) ? this.getProbabilityHTML() : this.checkProbability(newTimelineData)}</h3>
                                    {/*<button type="button" className="close" data-dismiss="modal" aria-label="Close" style={{marginTop: 0,marginBottom: 10}}>
                                    <span aria-hidden="true">×</span>
                                </button>*/}
                                </span>

                            </div>
                        </div>
                    </div>
                    <div className="modal-body">
                        <div className="col-md-12">
                            {/*<div className="card">*/}
                            {/*<div className="card-block">*/}
                                    {/* Horizontal Timeline start */}
                                    <div className="cd-horizontal-timeline">
                                        <div className="timeline">
                                            <div className="events-wrapper">
                                                <div className="events" id="foo">
                                                    <ol>
                                                        {newTimelineData.map((item, index) => (
                                                            <li key={item.id}>
                                                                <a
                                                                    href="#0" onClick={()=> this.setHeaders(item)}
                                                                    data-date={moment(item.scheduledFor).format('DD/MM/YYYY')}
                                                                    className={index === 0 ? 'selected' : null}>
                                                                    <Moment unix format="DD MMM">
                                                                        {item.scheduledFor / 1000}
                                                                    </Moment>
                                                                </a>
                                                            </li>
                                                        ))}
                                                    </ol>
                                                    <span className="filling-line" aria-hidden="true" />
                                                </div>
                                                {/* .events */}
                                            </div>
                                            {/* .events-wrapper */}
                                            <ul className="cd-timeline-navigation">
                                                <li>
                                                    <a href="#0" className="prev inactive">
                                                        Prev
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#0" className="next">
                                                        Next
                                                    </a>
                                                </li>
                                            </ul>
                                            {/* .cd-timeline-navigation */}
                                        </div>
                                        {/* .timeline */}
                                        <div className="events-content">
                                            <ol>
                                                {newTimelineData.map((item, index) => (
                                                    <li
                                                        key={item.id}
                                                        className={index === 0 ? 'selected' : null}
                                                        data-date={moment(item.scheduledFor).format('DD/MM/YYYY')}>
                                                        <div className="row">
                                                            <div className="col-sm-8" style={{fontSize:'1rem',paddingLeft: 3,paddingRight:0}}><b>Job</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: {item.jobName}</div>
                                                            {isNotEmpty(joiningDate) && <div className="col-sm-4" style={{fontSize:'1rem',paddingLeft: 3,paddingRight:0}}><b>Joined Date &nbsp;: </b>{joiningDate}</div>}
                                                        </div>
                                                        <div className="row">
                                                            <div className="col-sm-8" style={{fontSize:'1rem',padding:0}}><b>Stage</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: {this.props.stage}</div>
                                                            {isNotEmpty(offerDate) && <div className="col-sm-4" style={{fontSize:'1rem',paddingLeft: 0,paddingRight:0}}><b>Offer Date &nbsp;&nbsp;&nbsp;&nbsp;: </b>{offerDate}</div>}
                                                        </div>
                                                        <br></br>
                                                        <div className="row">
                                                            <div className="col-sm-12" style={{fontSize:'1rem',paddingLeft: 0}}><b>Comments</b> :<br></br>{item.comments}</div>
                                                        </div>
                                                    </li>
                                                ))}
                                            </ol>
                                        </div>
                                        {/* .events-content */}
                                    </div>

                                    {/* Horizontal Timeline end */}
                                    {/*</div>*/}
                                    {/*</div>*/}
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button style={{backgroundColor: '#8080808f',borderColor:'#8080808f'}}
                            type="button"
                            className="btn btn-primary waves-effect waves-light"
                            data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

Can anyone help?

See below snapshot for the work around I have tried suggested by @Jayavel.

Answer 1

Implemented a small workaround and hope it's fulfills your need, With my understanding you load your modal body with state and user will change something and you store those in the same state.

While closing the modal(close button) you need to reset the initial state i.e reset to default values.

Is that right !!! check this demo

what you need is,

store your default state like below:

const initialState = {
     isOpen: false, 
     value: "defaultvalue"
};

and in component :

class App extends Component {
  constructor(props) {
    super(props);
    this.state = initialState; // stored defaultstate
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  toggleModalClose = () => {  // modal close to reset input val
    this.setState(initialState);
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value //input new value
    });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleModal}>
          Open the modal
        </button>

        <Modal show={this.state.isOpen}
          onClose={this.toggleModalClose}>
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </Modal>
      </div>
    );
  }
}

Hope this helps.