isOpen flag cause the modal to be destroyed

[thian4]

isOpen is a flag where the DOM got 'appended' and 'destroyed', is there an option where I want to make the modal work as opacity: 0 or 1 instead of display none and false? opacity simply hide and can keep the states in the Modal component.

I can use css to control it but that seems like a hack. A prop as an option will be great.

[diasbruno]

Hi @thian4, you can wrap the modal like:

const MyModal = props => (
  <ReactModal isOpen {...props}>{props.children}</ReactModal>
);

Let me know if you can provide a nice way to accomplish this. I try to keep the API as small as possible to avoid users the need to find the right combination of properties.

[thian4]

isOpen is a flag to decide the children is gone or not from the DOM, your code about will cause the children's state to be gone. This is not a styling question, I think you misunderstood my question. I'm asking is it possible to use opacity under the hood so that children can keep the states although the modal remain hidden.

[diasbruno]

@thian4 Oh, I'm sorry. Totally misunderstood what you are asking. 🙏

That's correct. The state of what is inside the modal will be destroyed.

I'm not sure, but I think that using opacity, the modal will still be responsive to user input (keyboard and mouse).

One option is to persist the state on the parent component and give it to the modal when (re)open.

[m-nathani]

@thian4 Oh, I'm sorry. Totally misunderstood what you are asking.

That's correct. The state of what is inside the modal will be destroyed.

I'm not sure, but I think that using opacity, the modal will still be responsive to user input (keyboard and mouse).

One option is to persist the state on the parent component and give it to the modal when (re)open.

Hey guys, any update on stopping the modal to unmount on isOpen=false and only hide using css property ?

[hamzawain7]

Any updates? I too need states of what is inside the modal to retain.

[diasbruno]

This scenario of keeping mounted the inner component of the modal when it closes will not be implemented.

The lifecycle of the inner component of the modal is in between open and closed. So the state is not preserved between state transitions.

You must:

• Persist the state outside of the modal
• If you want to persist, you can render the inner component and store in hook (it will make it easy to let mem leaks happen)

const [comp] = useState(<InnerModalComponent ... />)
// don't do this!

[jnachtigall]

Did anybody find a good workaround, maybe using opacity: 0 or display: none or similar?

Our inner component is a complex 3rd party Map application that is loaded in an iframe (and takes about 5 secs to load). Whenever the modal is closed and re-opened the initialisation of the external map needs to happen again. Meaning user waits 5secs again...

I am not sure I understand the workaround with const [comp] = useState(<InnerModalComponent ... />) from above to preserve the inner component. I do not think this would work since it is not adding anything to the actual browser DOM.

[diasbruno]

@jnachtigall After you store the rendered component of the state, you can use it as a normal variable like

<div>{comp}</div>

Problem is that:

• You need to initialize the component and clean up (to avoid leaks)
• You will need to change how to state is passed from one component to another