0

I have context withActiveModalData and it has activeID

export const withActiveModalData = (Component: React.ComponentType<any>) => React.forwardRef((props, ref) => (
    <ModalContext.Consumer>
      {({ activeId, closeModal, data, promptData, openPromptModal }) => (
        <Component {...props} {...data} {...promptData} closeModal={closeModal} ref={ref} activeId={activeId} openPromptModal={openPromptModal}/>
      )}
    </ModalContext.Consumer>
))

And there is function for setting activeID to null

openModal: ({ setLocalState }) => (id: ModalId, data) => setLocalState({ data, activeId: id }),
closeModal: ({ setLocalState }) => () => setLocalState({ activeId: null, data: {} }),

When I closeModal, it becomes null. But in my handleDropFunction it doesn't update:

const enhance = compose(
 withActiveModalData,
 withHandlers({
 handleFileDrop: (props) => async (files: File[]) => {
      props.closeModal()
      console.log(props.activeId)
setTimeout(() => {
        console.log(props.activeId)
        console.log('3')
        //even here it is not update.
      }, 5000)
)},
 
)

I wish to make it reproducable codepen, but there are many components involved. It is updated in componentDidUpdate, but not updated inside the handleFileDrop function. I will provide more info if necessary. Thank you.

Jasurbek Nabijonov
  • 1,607
  • 3
  • 24
  • 37
  • 1
    a quick comment first, suppose everything is working, you won't be able to get activeId right away after `closeModal`. Because both `setState` and `context` takes at least one render cycle to get you new value. You can confirm by putting `console.log` inside `ModalContext.Consumer` (a render function), not event or dispatch. – windmaomao May 19 '21 at 15:26
  • @windmaomao Thank you. I will try it. Also, thank you for taking a look at this question. – Jasurbek Nabijonov May 19 '21 at 15:30
  • 1
    you are welcome Jasurbek. – windmaomao May 19 '21 at 15:52

0 Answers0