model open is working but close function doesn't work in react js

Question

I am working on bootstrap modal openup, when i click on Edit button, it open the bootstrap modal, but when i click on close button it doesn't close the modal, can anyone please check my code, and help me what's issue in it ? Here i have added my code, can anyone please tell me why close modal is not working for that, on close button it calls handleClose() method of Example Class thanks for your help.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Button,OverlayTrigger, Tooltip,Popover} from 'react-bootstrap';



//var Modal = require('react-bootstrap-modal') //require('react-bootstrap-modal')  
var Modal = require('react-bootstrap').Modal;  
//var Button = require('react-bootstrap').Button;  

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      show: false,
      //popup_index : this.props.popup_index
    };
  }

  handleClose() {
      //alert('sdsd');
      this.setState({ show : false });  
      //this.props.handleShow(this.state.show);
  }

  handleShow() {
      this.setState({ show: this.props.show });
  }  

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>

        <Modal show={this.props.handleShow} onHide={this.handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {this.props.popup_id} </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>  

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}


class PalladiumHub extends React.Component {


  render() {

    return (<tr>
      <td>{this.props.keyuser}</td>
      <td>{this.props.name.name}</td>
      <td><button type="button" onClick={(e) => { this.props.editTask(this.props.index) }} >Edit</button><button onClick={(e) => { this.props.deleteTask(this.props.index) }}>Delete</button></td>
    </tr>
    )
  }
}  

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false,
      show : false,
      popup_index:''
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal(index) {
      this.setState({show:true,popup_index:index});    
  }


  deleteTask(index) {
    //alert(index);
    //console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal(index);
    //console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (
      <section>
          <table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
            this.state.items.map((data, index) => {
              //return console.log(data.id);
              return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} /> 
            })
          }
          </table>
          <Example handleShow = {this.state.show} popup_id = {this.state.popup_index}  />
      </section>
    );
  }

}

ReactDOM.render(
    <CallCRUD />, document.getElementById('root')  
);

Answer 1

See you are passing this.state.show == true in handleShow.

So, now you need to make this.state.show == false on a close of modal.

To do so, make one function in the CallCRUD component:-

handleModal = () => {
  this.setState({
    show:false  
  }) 
}

Now, pass this function in a property to example component like this:

<Example handleShow = {this.state.show} handleClose={()=>{this.handleModal()}} popup_id = {this.state.popup_index}  />

Next, in Example component under the handleClose function write this:

this.props.handleClose();

Answer 2

Try making this changes: The change here is : this.handleClose, <Example showModal={this.state.show} popup_id={this.state.popup_index} handleClose={this.handleClose}/>

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false,
      show : false,
      popup_index:''
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal(index) {
      this.setState({show:true, popup_index:index});    
  }
  handleClose(){
    this.setState({show: false});
  }

  deleteTask(index) {
    //alert(index);
    //console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal(index);
    //console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (
      <section>
          <table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
            this.state.items.map((data, index) => {
              //return console.log(data.id);
              return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} /> 
            })
          }
          </table>
          <Example showModal={this.state.show} popup_id={this.state.popup_index}  handleClose={this.handleClose}/>
      </section>
    );
  }

}

Then to the Example component The Major change here is: <Modal show={this.props.showModal} onHide={this.props.handleClose} >, <Button onClick={this.props.handleClose}>Close</Button>

class Example extends React.Component {


  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>

        <Modal show={this.props.showModal} onHide={this.props.handleClose} >
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {this.props.popup_id} </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>  

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

Answer 3

You are using props data to show/hide your Modal but you are managing state on handleClose so you shoult use this.state.show instead of this.props.show just change the code as below.