useState not behaving as expected

Question

I have a problem with useState. editorDataOpen is updating correctly when set from openEditorData , but not when set from closeEditorData. The line console.log('Entering Profile > closeEditorData()') is reached without a problem.

The output I see in the console log is:

Render
Render
false (editorDataOpen set for the first time)
Render
Render
Render
Render
true (editorDataOpen set to true by a click, which opens Editor)
Entering Profile > closeEditorData() (triggered by a different click to close Editor, should set editorDataOpen to false, but doesn't)
Render
Render

and that's it, it never prints a last false, which would mean editorDataOpen is never set?

I've spent too much time on this today and I just cannot see where the bug is. Can someone help please? This is the code in question:

import React from 'react'
import {withTheme} from 'styled-components'
import {withContext} from '../../context/ContextHOC'
import withLoadingScreen from '../hocs/LoadingScreenHOC'
import {getEditorWidth} from '../../functions/funcEditor'
import {saveImagePlus} from '../../functions/funcDataSaver'
import Submodule from '../ui/Submodule'
import ImageCapsule from '../ui/ImageCapsule'
import EditorImage from '../editors/EditorImage'
import EditorProfileData from '../editors/EditorProfileData'
import Spacer from '../ui/Spacer'
import Table from '../ui/Table'
import ContainerGrid from '../ui/ContainerGrid'
import * as ops from '../../functions/funcStringMath'
import * as parse from '../../functions/funcDataParser'

const Profile = (props) => {

    const s = props.theme.sizes
    const c = props.theme.cards

    const {setLoadingOn, setLoadingOff} = props
    const [image, setImage] = React.useState(props.context.current.modules.me.profile.image)
    const [editorImageOpen, setEditorImageOpen] = React.useState(false)
    const [editorDataOpen, setEditorDataOpen] = React.useState(false)
    
    const openEditorImage = () => setEditorImageOpen(true)
    const openEditorData = () => setEditorDataOpen(true)
    
    const closeEditorImage = () => {
        setEditorImageOpen(false)
        setLoadingOff()
    }

    const closeEditorData = () => {
        console.log('Entering Profile > closeEditorData()')
        setEditorDataOpen(false)
        setLoadingOff()
    }

    React.useEffect(() => console.log(editorDataOpen), [editorDataOpen])

    const updateAfterSavingImage = (img) => {

        setImage({
            url: img.url,
            scale: img.scale,
            position: img.position
        })

        closeEditorImage()

    }

    const handleImageChanged = (img) => {
        
        if (img != undefined){

            setLoadingOn()

            const data = {
                companyId: props.context.current.company.id,
                userId: props.context.current.user.id,
                routeFile: props.context.routes.meProfileImage,
                routeData: props.context.routes.meProfileImageData,
            }
        
            saveImagePlus(img, data, updateAfterSavingImage)

        }
        else {
            console.log('Error: Image received is undefined, cannot save.')
            closeEditorImage()
        }

    }

    const spacer =
        

    const unparsedData = props.context.current.modules.me.profile.data
    const parsedData = parse.profileData(props.context.current.modules.me.profile.data)

    console.log('Render')

    return(

        

            

            {editorImageOpen &&
                
            }

            {spacer}
            {spacer}
            
            
            
                

                {editorDataOpen &&
                    
                }

            

            {spacer}
            {spacer}

        

    )
}

export default (
    withTheme(
        withContext(
            withLoadingScreen(
                Profile
            )
        )
    )
)


EDIT: This one has been solved by Dehan de Croos, many thanks!

So as Dehan mentions below, the event was bubbling up and triggering openEditorData in ContainerGrid. The  whole thing was mistifying because editorImageOpen was working correctly while editorDataOpen was not, and they both do the same thing: open an Editor window.
Once Dehan solved the mistery, I realized that the differene between the 2 is that inside ImageCapsule there is a ClickLayer component, which is there just to catch the click and the callback.
I did not use a ClickLayer with ContainerGrid, and that is why the event was able to bubble up.
Following Dehan's advice, I solved just by adding a ClickLayer inside ContainerGrid, like this:
            

                
            
                


                {editorDataOpen &&
                    
                }

0DDC0 · Accepted Answer

It would be better to have a working code snippet to diagnose this, but there is a good chance that the event might be bubbling up the component tree and triggering the openEditorData event here.

To check this quickly move the component shown below outside the component. And check whether this fixes things.

To clarify here, The move of code should happen so that < EditorProfileData ... /> will never appear as a child component of

            {editorDataOpen &&
                
            }

If now it's working properly and you desperately need to maintain the above component hierarchy/structure. You can call stopPropegation but you will need to have the native JS event with you. To explain how to do this I need to know what looks like. But assuming the close prop does return the native click event as a callback, the fix will look something like this.

            {editorDataOpen &&
                 {
                        e.stopPropagation();
                        closeEditorData();
                    }}

                    width = {getEditorWidth(1, c.cardsPerRow, c.card.width, s.spacing.default)}
                    header = {{
                        text: 'Edit Profile Data',
                    }}
                    data = {unparsedData}
                />
            }

If not we need to find the original onClick event and pass up to that prop callback.

useState not behaving as expected

Answers (1)

Related Questions