CODEWITHSUNDEEP
reactjsbootstrap-4bootstrap-modal
nishant
nishant

Reputation: 117

clearing particular contents of a modal upon closing in react

I am using bootstrap class to call a Modal in my react component where in the right side of a Modal body it has an axios call. I want to clear the right side of the Modal upon clicking either the close button or 'X' button so that for the next Popup the right side will be empty again. Is it possible? If yes, I'm not sure how exactly to accomplish as there are inbuilt bootstrap classes.

triggerHandler(){
axios.post(`http://localhost:8200/playit`)
  .then( response=>{
    console.log(response.data)
    this.setState({
        value:response.data
    })
  })
 }
render(){
let value = this.state.value
return(
  <div>
    <div className="modal fade bd-example-modal-lg" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div className="modal-dialog modal-lg" role="document">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title" id="exampleModalLabel">Response and Trigger</h5>
            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="row">
              <div className="col-lg-6">
              {
                Hello
              }
              </div>
              <div className="col-lg-6">
                {value}
                <button className="btn btn-primary" onClick={()=>this.triggerHandler()}>Trigger</button>
              </div>
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
 );
}

As described above after receiving the response when I click on close on "X" button the right side should become empty upon closing.

Upvotes: 1

Views: 4645

Answers (1)

Tetsuya3850
Tetsuya3850

Reputation: 1019

 onCloseModal = () => {
          this.setState({value:""})
        }

<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={()=>this.onCloseModal()}>Close</button>

Add an onCloseModal function to the button that sets the value to empty string.

Upvotes: 2

Related Questions