Can Someone Help me with this React.js component.

Here I want to keep on going inside the local directory choosing the needed directory. I can have multiple Input Tables, thus I have list in every state variable and input_num is the index of the particular state function from the list so as to update the same..

I have got two ways.

Way 1- Using another state variable inside the component

    import { useState, useEffect } from 'react';
    
    export default function InputTable({
        InputTableSelectedPath,
        setInputTableSelectedPath,
        InputTableListFileNames,
        setInputTableListFileNames,
        InputTableFileName,
        setInputTableFileName,
        input_num
    }) {
        const [SelectedPath, setSelectedPath] = useState(InputTableSelectedPath);
        const [ListFileNames, setListFileNames] = useState(InputTableListFileNames);
        const [FileName, setFileName] = useState(InputTableFileName);
    
        useEffect(() => {
            setSelectedPath(InputTableSelectedPath);
            setListFileNames(InputTableListFileNames);
            setFileName(InputTableFileName);
        }, [InputTableSelectedPath, InputTableListFileNames, InputTableFileName]);
    
        // Input Table
        function handleInputTable(e) {
            const selectedValue = e.target.value;
    
            if (selectedValue.endsWith('.csv')) {
                const updatedFileName = [...FileName];
                updatedFileName[input_num] = selectedValue.substring(0, selectedValue.length - 4);
                setFileName(updatedFileName);
                setInputTableFileName(updatedFileName);
                return; // Exit the function if a CSV file is selected
            }
    
            let updatedPath;
    
            if (selectedValue === 'back') {
                updatedPath = SelectedPath[input_num].split("/").slice(0, -1).join("/");
                const updatedFileName = [...FileName];
                updatedFileName[input_num] = '';
                setFileName(updatedFileName);
                setInputTableFileName(updatedFileName);
            } else if(selectedValue === ''){
                updatedPath = ${SelectedPath[input_num]}${selectedValue}
                const updatedFileName = [...FileName];
                updatedFileName[input_num] = '';
                setFileName(updatedFileName);
                setInputTableFileName(updatedFileName);
            } else {
                updatedPath = ${SelectedPath[input_num]}/${selectedValue};
            }
    
            if (updatedPath === SelectedPath[input_num]) {
                return;
            }
    
            const updatedSelectedPath = [...SelectedPath];
            updatedSelectedPath[input_num] = updatedPath;
            setSelectedPath(updatedSelectedPath);
            console.log(updatedPath=${updatedPath});
            console.log(updatedSelectedPath[input_num]);
    
            fetch('http://localhost:3000/directories?path=' + updatedPath)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log(data.directories);
                    const updatedListFileNames = [...ListFileNames];
                    if (data.csvFiles && data.csvFiles.length > 0) {
                        updatedListFileNames[input_num] = data.csvFiles;
                    } else {
                        updatedListFileNames[input_num] = data.directories;
                    }
                    setListFileNames(updatedListFileNames);
                    setInputTableListFileNames(updatedListFileNames);
                    setSelectedPath(updatedSelectedPath);
                    setInputTableSelectedPath(updatedSelectedPath); 
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    // Optionally, reset the InputTableSelectedPath to the previous value on error
                    setInputTableSelectedPath(SelectedPath);
                });
        }
    
        function handleInputTable2(e) {
            const updatedFileName = [...FileName];
            updatedFileName[input_num] = e.target.value;
            setFileName(updatedFileName);
            setInputTableFileName(updatedFileName);
        }
    
        return (
                {ListFileNames[input_num].map((name, index) => (
                    {SelectedPath[input_num].split('/').slice(-4).join("/")}{"/"}{name}
                ))}
        );
    }

This is doing as perfectly as thought of. But then I thought of directly rendering the state variables using setter functions from parent component.

Way 2 –

    import { useState, useEffect } from 'react';

    export default function InputTable({
        InputTableSelectedPath,
        setInputTableSelectedPath,
        InputTableListFileNames,
        setInputTableListFileNames,
        InputTableFileName,
        setInputTableFileName,
        input_num
    }) {
        function handleInputTable(e) {
            const selectedValue = e.target.value;
    
            if (selectedValue.endsWith('.csv')) {
                const tempFileName = [...InputTableFileName];
                tempFileName[input_num] = selectedValue.substring(0, selectedValue.length - 4);
                setInputTableFileName(tempFileName);
                return; // Exit the function if a CSV file is selected
            }
    
            let updatedPath;
    
            if (selectedValue === 'back') {
                updatedPath = InputTableSelectedPath[input_num].split("/").slice(0, -1).join("/");
                const tempFileName = [...InputTableFileName];
                tempFileName[input_num] = '';
                setInputTableFileName(tempFileName);
            } else {
                if (selectedValue === '') {
                    updatedPath = `${InputTableSelectedPath[input_num]}${selectedValue}`;
                    const tempFileName = [...InputTableFileName];
                    tempFileName[input_num] = '';
                    setInputTableFileName(tempFileName);
                } else {
                    updatedPath = `${InputTableSelectedPath[input_num]}/${selectedValue}`;
                }
            }
    
            if (updatedPath === InputTableSelectedPath[input_num]) {
                return;
            }
    
            fetch('http://localhost:3000/directories?path=' + updatedPath)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    setInputTableListFileNames(prevListFileNames => {
                        const tempListFileNames = [...prevListFileNames];
                        if (data.csvFiles && data.csvFiles.length > 0) {
                            tempListFileNames[input_num] = data.csvFiles;
                        } else {
                            tempListFileNames[input_num] = data.directories;
                        }
                        return tempListFileNames;
                    });
    
                    setInputTableSelectedPath(prevSelectedPath => {
                        const tempSelectedPath = [...prevSelectedPath];
                        tempSelectedPath[input_num] = updatedPath;
                        return tempSelectedPath;
                    });
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    setInputTableSelectedPath(InputTableSelectedPath);
                });
        }
    
        function handleInputTable2(e) {
            const tempFileName = [...InputTableFileName];
            tempFileName[input_num] = e.target.value;
            setInputTableFileName(tempFileName);
        }
    
        return (
                {InputTableListFileNames[input_num].map((name, index) => (
                        {InputTableSelectedPath[input_num].split('/').slice(-4).join("/")}/{name}
                ))}
        );
    }

Here, the dropdown with initial states come as perfectly. And when chosen the first path, the directories inside are also visible on the console. But this function

    setInputTableListFileNames(prevListFileNames => {
        const tempListFileNames = [...prevListFileNames]; // Create a new array based on previous state
        if (data.csvFiles && data.csvFiles.length > 0) {
            tempListFileNames[input_num] = data.csvFiles;
        } else {
            tempListFileNames[input_num] = data.directories;
        }
        return tempListFileNames; // Return the updated state
    });

It is not updating the InputTableListFileNames. I am unable to find the reason. Can you please help??