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.
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:When the
shouldShow
state in theMexiMap
(parent) component is updated, this is correctly reflected in the modal behavior, since the first click opens the modal. On closing the modalhandleClose
is called, which setsshow
tofalse
.The problem with this is that this state is local to
CustomModal
. The parent component isn’t aware that the modal state has changed, becauseshow
has changed and notshouldShow
.What you can do instead is pass your parent components’
setShouldShow
to the CustomModal (child) component and use this function to update theshowModal
state.Here’s a simplified example of the approach:
Here’s a sandbox that includes the implementation above and a simplified version of your original code that reproduces the problem.