After the second click Modal is not showing in my react boostrap table

by

Im usign react boostrap tables but after i click it once, the second time i click in my table the modal is not showing.

Here is my table component

const CustomTable = ({ setStateName, setShouldShow }) => {

  const handleTdClick = ( {name} ) => {
    setStateName(name);
    setShouldShow(true);
    
  };

  return (
    <Table striped bordered hover variant="dark" size="sm">
      <thead>
        <tr>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          { estados.map(e => (
              <td key={e.id} onClick={ () => handleTdClick(e)}>
              {e.name}
              </td>
          ))}
        </tr>
      </tbody>
    </Table>
  );
};

Here is the father component where the modal and the table is called as well as the ”’shouldShow“` etc.

const MexiMap = () => {

  const [stateName, setStateName] = useState('');
  const [shouldShow, setShouldShow] = useState(false);

  const chartEvents = [{
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(chart, "select", e => {
        const id = chart.getSelection()[0].row;
        const name = getNombreEstadoById(id);
        setStateName(name);
        setShouldShow(true);
        setShouldShow(false);
        
      });
    }
  }]

  const options = {
    region: 'MX',
    resolution: 'provinces',
    colorAxis: { colors: ['#00853f', 'black', '#e31b23'] },
    backgroundColor: '#FFFFFF',
    datalessRegionColor: '#eeeeee',
    defaultColor: 'white',
  }

  return (
    <>
      <Chart
        width={'1500px'}
        height={'900px'}
        chartType="GeoChart"
        data={data}
        options={options}
        chartEvents={chartEvents}
      />

      <CustomModal name={stateName} showModal={shouldShow} />
      

      <CustomTable setStateName={setStateName} setShouldShow={setShouldShow} />
    </>
  );
};

export default MexiMap;

And here is the modal component:


const CustomModal = ({ name, showModal }) => {

  const [show, setShow] = useState(showModal);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    showModal && setShow(true);
  }, [showModal]);

  return (
    <>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{name}</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default CustomModal;

Can anyone help me, how to fix the table so the modal shows everytime the table is clicked.

42 thoughts on “After the second click Modal is not showing in my react boostrap table”

Leave a Comment