How Do I Cycle Through The Elements Of An Array Inside Of A Div Tag One By One In React

So, I have a huge array of 2d arrays. Each 2d array is basically a step of my backtracking algorithm finding a sudoku solution. I want to find a way display each step in a table. I

Solution 1:

This answer was actually given to me by User @T.J. Crowder. He answered this question that was simplified as a normal array, here.

Assuming this is a functional component, you need to let the component render each state before setting the next. Otherwise, all the state updates get batched together and the component only renders again when they're all done.

For instance:

    function Example() {
        const [arr, setArr] = useState([1,2,3,4,5,6,7,8,9,0]);
        // Set up a timer on mount, remove it on dismount and when
        // we run out of values to show
        useEffect(() => {
            const handle = setInterval(() => {
                // Note useing the callback function, so `arr` isn't stale
                // in this callback
                setArr(a => {
                    if (a.length) {
                        // Update the array, dropping the first entry
                        return a.slice(1);
                    }
                    // No more entries, stop the timer
                    clearInterval(handle);
                    return a;
                });
            }, 500);
            return () => clearInterval(handle);
        }, []);
        return <div>{arr.join()}</div>;
    }