Component doesn't rerender

Photoshop
,
1

Greetings people,
I am working on a simple plugin that would allow me to go through pages in photoshop one by one and name them using some template. I am running into an issue with a useState hook that I am not sure how to fix.

I have 3 files. One is where I select the directory for importing files. Then I have another file called Export.jsx where I will handle movement between files. Lastly, I have a file that connects everything together called PanelSelector.jsx. This is to avoid using createStore() as I couldn’t manage to get it to work (couldn’t install react-redux for some reason). Anyways, here is the relevant code

Import.jsx - Not all of it, just the main part

const getImportFolder = async (setter) => {
        console.log("Import folder")
        const folder = await getFolder(setter)
        const entries = await folder.getEntries()
        const allFiles = entries.filter(entry => entry.isFile)
        setFiles(allFiles.map(file => {
            return {name: fs.getNativePath(file), isDone: false}
        }))
    }
    return <div id={"import"}>
        {/*Heading*/}
        <sp-heading size={"L"}>Import</sp-heading>
        <sp-divider size="small"></sp-divider>

        {/*Importing*/}
        <sp-heading size={"S"}>Choose import directory</sp-heading>
        <sp-body size={"S"}>{importPath == null ? "path to directory" : importPath}</sp-body>
        <sp-button variant={"primary"} onClick={() => getImportFolder(setImportPath)}>Choose folder</sp-button>
        <br/>
        <sp-divider size="medium"></sp-divider>
        {/*Exporting*/}
        <sp-checkbox checked={isExportChecked} onClick={handleExportCheck}>Export files</sp-checkbox>
        {isExportChecked &&
            <div id={"export-details"}>
                <sp-heading size={"S"}>Choose the export folder</sp-heading>
                <sp-body size={"S"}>{exportPath == null ? importPath : exportPath}</sp-body>
                <sp-button variant={"primary"} onClick={() => getFolder(setExportPath)}>Choose folder</sp-button>
            </div>
        }
    </div>

Export.jsx

export const Export = ({files, nameTemplate}) => {
    console.log(files)
    console.log(nameTemplate)
    return <div id={"export"}>
        {/*Heading*/}
        <sp-heading size={"L"}>Export</sp-heading>
        <sp-divider size="small"></sp-divider>
        <br/>
        {/*List of files to finish.*/}
        <sp-progressbar max={100} value={30}>
            <sp-label slot={"label"} size={"small"}>Progress:</sp-label>
        </sp-progressbar>
        <div id={"files"}>
            {files.map(file => <p>{file.name} | {file.isDone ? "Completed" : "Uncompleted"}</p>)}
        </div>
        <br/>
        {/*Movement between pages*/}
        <sp-action-button>Before</sp-action-button>
        <sp-action-button>Save</sp-action-button>
        <sp-action-button>After</sp-action-button>
        <br/>
        {/*Completion*/}
        <sp-button variant={"cta"}>Complete page</sp-button>
    </div>
}

PanelSelector.jsx

export const PanelSelector = ({panel}) => {

    const [nameTemplate, setNameTemplate] = useState("")
    const [files, setFiles] = useState([])
    console.log(files)
    if (panel === 0) {
        return <div className={"panel"}>
            <Import setFiles={setFiles}/>
        </div>
    } else if (panel === 1) {
        return <div className={"panel"}>
            <Naming setNameTemplate={setNameTemplate}/>
        </div>
    } else if (panel === 2) {
        return <div className={"panel"}>
            <Export nameTemplate={nameTemplate} files={files}/>
        </div>
    } else
        return <></>
}

Now, the problem is in the Export.jsx where I map stuff to elements. It seems that the component doens’t get updated when I call the setter (setFiles) in PanelSelector.jsx. Therefore, the files that I send to the Export.jsx do change (Am checking it with the console.log) but the component itself doesn’t update, leading to the panel looking the same.

Why is this not working? I may be overlooking something simple. Do ask more questions if you need to!

2

I think I figured it out why it doesn’t work in the meanwhile. It’s because I make 3 panelSelector components instead of having just one.

However, this leads me to a different question. How do I send stuff between panel components?

3

Same as you pass them to your Export component
Without more context it’s hard to answer :thinking: