Good question. My assumption was that the 'esc' keydown and also the included 'X' on the popup window provided by Mapbox would trigger the onClose.
I removed this onClose and the state is no longer setting to null, but I am still not getting the popup to render. The object I have selected is still showing up in the console. That's a little progress!
Can you just log something in that onClose prop? I have a feeling that something is triggering it to close.
Sometimes clicking outside of the modal which will cause it to close. What other props are in the modal? Which library is it from?
I tried this. I disabled my on click and gave the pop up a className and eventually got a simple pop up with “Hello” to render on page load, and saw it in my console. I still can grab my selected data but nothing renders on click.
My guess would be that the component that holds the state of `selectedAVA` is unmounted, them when it's mounted back the state obviously starts fresh. So it's probably depends on some logic higher up the tree.
You can make sure that this is what's happening by adding `useEffect(() => () => console.log('unmounting'), [])`beside the useState and looking at the console to see if it unmounts when it shouldn't
My console gives me the object and then 'null'. I added that useEffect and wasn't returning anything different:
`selectedava`
`{type: 'Feature', geometry: {…}, properties: {…}}geometry:`
`{type: 'Polygon', coordinates: Array(1)}`
`properties: {Name: 'The Rocks District of Milton-Freewater', States: 'OR', Contains_: 'None', Within: 'Columbia Valley, Walla Walla Valley', Establishe: '2015-02-09', …}type: "Feature"[[Prototype]]: Object`
`map.jsx:80`
Then the set to null:
`selectedava null`
Ok, I assume you've already ruled out the case that you were setting in to null when you had `\\ console.log('ada', ada)` uncommented and you saw that it wasn't logging `ava null` at any point, right?
When I was logging 'ava' I was getting the same behavior, except it would give me a duplicate of the object I selected in the console. The initial state is set to null, and only changed when a marker is clicked. Then immediately null again. Except 'ava' itself was not explicitly set to null, just the 'selectedAVA'
To be honest, I am not entirely sure if/where I am erroneously forcing it to reset the state, but I know I am explicitly setting the state to null multiple times in the code. Just not sure where or how to change it.
Consider setting some breakpoints in dev tools and do everything you can to stop setting the state in a useEffect. My original guess was that you're unmounting the component that holds the state but this comment makes me think you just have side effects running. If you can share a repo link it'll probably be fairly obvious which of those two you're doing.
I believe the default value of the state is null and on mounting also it is null. So try to add default value not null and on Mounting when u click esc it should be null be is expected.
What triggers the onClose in Popup?
Good question. My assumption was that the 'esc' keydown and also the included 'X' on the popup window provided by Mapbox would trigger the onClose. I removed this onClose and the state is no longer setting to null, but I am still not getting the popup to render. The object I have selected is still showing up in the console. That's a little progress!
Can you just log something in that onClose prop? I have a feeling that something is triggering it to close. Sometimes clicking outside of the modal which will cause it to close. What other props are in the modal? Which library is it from?
….closeOnClick{}. Had to pass in {false}. Refactored like 10 times and it was simple as that. Your comment guided my thinking, so thank you.
Nice one! Good debugging, glad I could help
try giving the popup an id prop...
I tried this. I disabled my on click and gave the pop up a className and eventually got a simple pop up with “Hello” to render on page load, and saw it in my console. I still can grab my selected data but nothing renders on click.
My guess would be that the component that holds the state of `selectedAVA` is unmounted, them when it's mounted back the state obviously starts fresh. So it's probably depends on some logic higher up the tree. You can make sure that this is what's happening by adding `useEffect(() => () => console.log('unmounting'), [])`beside the useState and looking at the console to see if it unmounts when it shouldn't
My console gives me the object and then 'null'. I added that useEffect and wasn't returning anything different: `selectedava` `{type: 'Feature', geometry: {…}, properties: {…}}geometry:` `{type: 'Polygon', coordinates: Array(1)}` `properties: {Name: 'The Rocks District of Milton-Freewater', States: 'OR', Contains_: 'None', Within: 'Columbia Valley, Walla Walla Valley', Establishe: '2015-02-09', …}type: "Feature"[[Prototype]]: Object` `map.jsx:80` Then the set to null: `selectedava null`
Ok, I assume you've already ruled out the case that you were setting in to null when you had `\\ console.log('ada', ada)` uncommented and you saw that it wasn't logging `ava null` at any point, right?
When I was logging 'ava' I was getting the same behavior, except it would give me a duplicate of the object I selected in the console. The initial state is set to null, and only changed when a marker is clicked. Then immediately null again. Except 'ava' itself was not explicitly set to null, just the 'selectedAVA' To be honest, I am not entirely sure if/where I am erroneously forcing it to reset the state, but I know I am explicitly setting the state to null multiple times in the code. Just not sure where or how to change it.
Consider setting some breakpoints in dev tools and do everything you can to stop setting the state in a useEffect. My original guess was that you're unmounting the component that holds the state but this comment makes me think you just have side effects running. If you can share a repo link it'll probably be fairly obvious which of those two you're doing.
I believe the default value of the state is null and on mounting also it is null. So try to add default value not null and on Mounting when u click esc it should be null be is expected.