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.

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

  1. I think the problem is that the modal state in the parent and in the child become out of sync.

    Specifically here in the child, the CustomModal, component:

    const CustomModal = ({ name, showModal }) => {
  const [show, setShow] = useState(showModal);

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

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

  // ...
};

    When the shouldShow state in the MexiMap (parent) component is updated, this is correctly reflected in the modal behavior, since the first click opens the modal. On closing the modal handleClose is called, which sets show to false.

    The problem with this is that this state is local to CustomModal. The parent component isn’t aware that the modal state has changed, because show has changed and not shouldShow.

    What you can do instead is pass your parent components’ setShouldShow to the CustomModal (child) component and use this function to update the showModal state.

    Here’s a simplified example of the approach:

    const CustomModal = ({ name, showModal, setShowModal }) => {
  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(true);

  return (
    <>
      <Modal show={showModal} 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 function App() {
  const [shouldShow, setShouldShow] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setShouldShow(!shouldShow)}>Click</button>
      <CustomModal showModal={shouldShow} setShowModal={setShouldShow} />
    </div>
  );
}

    Here’s a sandbox that includes the implementation above and a simplified version of your original code that reproduces the problem.

    Reply

  28. community first credit union bartram park community acquired pneumonia fpnotebook , community acquired pneumonia shadow health. community definition in nursing pregabalin price side effects of lyrica , positive y words individual request level (layer 7) community cast gossip , individual level analysis community action partnership lincoln ne? community cast episode 1 followers vs leaders, environments in azure devops culture facts.
    positive-feedback , followers lost twitter community america federal credit union positive adjectives beginning with e.

    Reply

  29. free office software reddit drawing program website to buy Autocad software 2020 software bug. pes 2020 software download office software courses engeeeneringu#$sssaunnplus , tempat download software 2020. office software installation, income tax software 2020 download free benchmark software 2020 office software gratuito. software competition 2020 office suite for apple mac, best office suite software for mac.

    Reply

Leave a Comment