setState not working inside a simple if condition of a function

Question

I am trying to setState in a function inside if condition but thee value is not getting updated.

Please find below the code snippet

archivePath = (filepath: string) => {
        if (filepath) {
            const breadcrumbs: any[] = [];
            var selectedgroup: string | undefined = "";
            let relPath: string = this.props.selectedGroup + "";
            breadcrumbs.push({ name: this.props.selectedGroup, path: relPath });
            const sliceCount = relPath.split("/").length;
            const pathMap = filepath.split("/").slice(sliceCount);
            if (pathMap.length > 0) {
                console.log("inside if of pathMap");
                selectedgroup = pathMap.pop();
                console.log("selectedgroup: ", selectedgroup);
                this.setState({
                    selectedFolder: selectedgroup
                }, () => {
                    console.log("selectedFolder in enterfolder: ", this.state.selectedFolder);
                });
            }
            else {
                this.setState({
                    selectedFolder: '',
                })
            }
            pathMap.map((baseName) => {
                console.log("baseName in enterfolder: ", baseName);
                relPath += ("/" + baseName);
                if (baseName === ".archive" || baseName.startsWith(".")) {
                    // this.setState({ isArchive: true });
                } else {
                    breadcrumbs.push({ name: baseName, path: relPath });
                }
            });

The console log prints the correct value for the local variable created selectedgroup but the setState is not updating the state value

how are you determining that setState is not updating the state value? — Rao Virinchi, Sep 15 '21 at 17:53
console.log("selectedFolder in enterfolder: ", this.state.selectedFolder); Thiis console log does not display the correct value — Rani Agrawal, Sep 15 '21 at 17:56
While this is exactly the sort of thing setState is suppose to work around, just to confirm, ca nyou put a 2 second wait before the console.log("selectedFolder in enterfolder: ", this.state.selectedFolder); to see if it is a state propagation issue? — Rao Virinchi, Sep 15 '21 at 18:01

Kavindu Vindika · Answer 1 · 2021-09-15T18:17:11.863

0

As @RaoVirinchi mentioned,it's possible to pass a callback function to this.setState method.

this.setState update the state in an asynchronous manner. As a result, state updates won't be visible right away. Therefore, keep it as follows and do the console log separately inside the render method to make sure that it captures the correct state updates.

this.setState({
  selectedFolder: selectedgroup,
});

Have the console log inside the component render method. Then it'll log the updated state whenever component re-renders with state update.

console.log("selectedFolder in enterfolder: ", this.state.selectedFolder);

edited Sep 15 '21 at 18:17

answered Sep 15 '21 at 18:02

Kavindu Vindika

2,449
1
13
20

1

Actually, you can pass a callback to setState. It is supposed to execute once the state propagation finishes and the component is re-rendered. Please refer to https://stackoverflow.com/questions/37401635/react-js-wait-for-setstate-to-finish-before-triggering-a-function. – Rao Virinchi Sep 15 '21 at 18:06
got your point. It's possible. I'll update the answer. – Kavindu Vindika Sep 15 '21 at 18:14
1

Thank you all for the help! I was able to resolve the issue by setting the state in componentDidMount() – Rani Agrawal Sep 16 '21 at 09:51

setState not working inside a simple if condition of a function

1 Answers1