How to close bootstrap modal programmatically in react js

Question

I have the following component which is modal code component :

import React from "react";

export default class AddNewList extends React.Component{
    constructor(props) {
        super(props);


    }


x=(e)=>
{
    // here I want code to close the modal
}

    render() {

        return (
            <div className="modal" id="addnewlist">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h4 className="modal-title">Add New List</h4>
                        </div>

                        <div className="modal-body">

                            <label >List Title</label>
                            <input type="text" className="form-control" onChange={this.props.action_handle_list_input}/>

                        </div>

                        <div className="modal-footer">
                            <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-outline-success" onClick={this.x} >Save</button>

                        </div>

                    </div>
                </div>
            </div>
        );
    }


} 

my question is "How to close this modal in the the end of function x " Note that I need to still use bootstrap not react-bootstrap .

Answer 1

To open and close modal, maintain a state say showModal and toggle it as you need. Conditionally (if showModal is true) render the modal.

See working copy of your code

Code snippet

...
state = {
    showModal: false
  };

  openModal = () => {
    this.setState({ showModal: true });
  };

  closeModal = () => {
    this.setState({ showModal: false });
  };
  ...

  render() {
    return (
      <>
        <div>
          <button onClick={this.openModal} className="btn btn-primary btn-lg">
            Open Modal
          </button>
        </div>
        {this.state.showModal && (
          <div className="" id="addnewlist">
            <div className="modal-dialog">
              <div className="modal-content">
      ...

       <div className="modal-footer">
                  <button
                    type="button"
                    className="btn btn-danger"
                    data-dismiss="modal"
                    onClick={this.closeModal}
                  >
                    Close
                  </button>
      ....

Also note that above is a lot of boilerplate. So once you are comfortable try to take advantages of libraries such as reactstrap material-ui semantic-ui-react etc

Answer 2

Modal is relatively fancy component, so you could take a look other library ex. react-bootstrap or reactstrap.

But just to answer your question, you need to have a state to enable or disable things, ex.

  const [on, setOn] = useState(false)
  const onToggle = e => { setOn(!on) }

  return (
    <button onClick={onToggle}>Toggle</button>
    <Modal on={on} />
  )

or if I use your code, replace Modal line with the following

  { on && ( your modal code ) }

Answer 3

you have a close button in model

<button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>

just provide the id attribute to close button like below

<button type="button" id="closeButton" className="btn btn-danger" data-dismiss="modal">Close</button>

and use below code

x = e => { document.getElementById('closeButton').click() }