during my display modal(update). I wan’t to show/hide a <div> based on the value of one column.
See below existing code.
const [showDateTimeDiv, setshowDateTimeDiv] = useState(false)
const [modalEdit, setModalEdit] = useState(false);
const [details, setDetails] = useState({
ID: '',
TYPE : '',
....
})
const openCloseModalEdit =()=>
{
setModalEdit(!modalEdit)
}
.....
const bodyUpdate = (
{showDateTimeDiv &&
<div>
....
</div>
}
)
return(
<div>
<Modal
open = {modalEdit}
onClose = {openCloseModalEdit} >
{bodyUpdate}
</Modal>
</div>
What I want to do is when details.TYPE = 'A' then setshowDateTimeDiv(true). I tried to put this inside the openCloseModalEdit however, on the first open, it did not take effect, it take effect on the second trigger of openCloseModalEdit.
Note: since this is an update details will have value upon opening the modaledit
Thank you
Answer
useEffect can solve this problem.
useEffect(()=>{
details.TYPE === 'A' ? setshowDateTimeDiv(true) : setshowDateTimeDiv(false);
},[details]);
Please try to use this and let me know the result.