CODEWITHSUNDEEP
javascriptrecursion
Omar_Jandali
Omar_Jandali

Reputation: 575

The recursive function call is 'out of reach' within my react component

I have a react component and I want to apply a recursive function. I have a function call inside my recursive function that will call the main function once a process is done. The inner function call is not being called and it is saying that the function is out of reach. I am not sure how to ensure that I can call the main function from the inner function.

if you look in the code, under the HelpFolder call, I want to call the traverseFolder function again. that is what is showing unreachable code detected.

I tried using this.traverse folder which did not work.

const traverseFolder = (current:any) => {
        console.log(current.length)
        if(current.length > 0){
            for(var i = 0; i < current.length; i++){
                console.log(current[i].type)
                if(current[i].type === 'folder'){
                    console.log(current[i].name)
                    return(
                        <HelpFolder
                            type={current[i].type}
                            name={current[i].name}
                            path={current[i].path}
                        />
                    )
                    traverseFolder(current[i])
                } else {
                    return(
                        <HelpFile
                            type={current[i].type}
                            name={current[i].name}
                            path={current[i].path}
                        />
                    )
                }
            }
        } else {
            console.log('no folder')
            return(
                <div>
                    {} 
                </div>
            ) 
        }
    }

What I am expecting is that it displays 2 folders and 2 files but it is just showing the first folder.

Upvotes: 0

Views: 31

Answers (2)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18113

You should call the traverseFolder function inside the return statement otherwise the code will not be executed

You should fix the code related to the folder part like this :

if(current[i].type === 'folder'){
  return(
    <>
      <HelpFolder
        type={current[i].type}
        name={current[i].name}
        path={current[i].path}
      />
      {traverseFolder(current[i])}
    </>
  );
}

Upvotes: 0

Yannick K
Yannick K

Reputation: 5422

The code is unreachable because you put it after the return. Once you return, anything after that will not be executed and the function is exited. So put the function call before it.

Upvotes: 1

Related Questions