0

I am trying to debug an issue with an ionic modal that is refusing to dismiss. I cannot reproduce the issue in isolated environment, so I cannot really share any relevant code.

First I am trying to understand how there can be a mismatch between the prop value and the state value. In all my other occurrence's, these are the same.

Basically I have an (Ionic) modal that is managed like:

<Modal isOpen={showModal} />

After submitting a setShowModal(false) will be called to dismiss the modal. The console logs for showModal are 'false'. Yet I still can see the modal.

When I check in React Dev Tools I see there is a mismatch between the 'props' isOpen and the 'state' isOpen. In my other working examples, they are synced the same.

What I am trying to understand here is the difference between the two (props and state in React Dev Tools)? And how they can possibly be different?

React Dev Tools - Components

SaroGFX
  • 699
  • 6
  • 20
  • if you wrote something like const [isOpen, setIsOpen] = useState(props.isOpen) then changing the prop won't change the state. I think the better option is to control the state of the modal outside of it and simply pass isOpen as a prop without having it as a state. – e.pacciani Mar 13 '23 at 17:18
  • @e.pacciani The state is initialised with `[showModal, setShowModal] = useState(false)` and then set outside of the modal within it's logic like `onSubmit() { setShowModal(false))`. That's the way to do it, right? It needs to trigger a re-render. – SaroGFX Mar 13 '23 at 17:25
  • I would have the showModal state outside of the component and pass showModal and setShowModal as props to the modal component and I'd remove the isOpen state inside the modal. – e.pacciani Mar 14 '23 at 08:55

1 Answers1

0

In ReactJS props.variable and state.variable are completely separate and will often have different values.

props are passed through when the component is created - they are initial values set from the attributes in the html tag.

state can be changed at any time and reflect the state of the component. They are typically, but not necessarily, initially set to the props values and are changed by events via a setState({ variable : newValue }), eg setShowModal(false) almost certainly does a setState({ isOpen : false }). Every time a setState is fired the component.render() method is refired, ie the component is re rendered.

An annoying aspect of a reactjs setState is that it is async, the state value being set only updates a little later. I doubt that is is in play here.

John Williams
  • 4,252
  • 2
  • 9
  • 18
  • This is what I was expecting initially too. But when I look at my other modal that is working correctly, the prop of the modal also get's updated as soon as I do a setState. So it's not just simply the initial value, it will update in React Dev Tools. The issue I having is that the state variable is false, but in react dev tools the state is still saying true. While the prop value did change to false. I don't understand what is the difference if the prop is reading the state. – SaroGFX Mar 13 '23 at 17:52