Hide/Show
during update based on condition reactjs

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.