How do I implement a function to navigate through my react table using arrow keys? I want to tackle this problem using Reactjs only

Question

Hey can someone help me out. I want to implement traversal through inputs (which are basically in table cells in a Table) using Arrow Keys (Up, Down, Left and Right). I am struggling to find a solution to do this. I have searched through Google But All the Solutions I have found are done using JQuery. My Goal is to Tackle this problem in React. I have tried this all the hooks present here. But none worked out for me. Maybe, I couldn't get it's logic because I am still a beginner.

I tried your solution but it's a little more complicated for me and my code just became more complex. Can you help me out with this, I am struggling pretty hard to implement this. I implemented The Above solution but it didn't work out.

This is My Component Here is my component (I am using Material UI v5) 👇🏻

import * as PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { css } from '@emotion/react';
import { Grid } from '@mui/material';
import useTraversalThroughInputs from './useTraversalThroughInputs';
import { useEffect } from 'react';

const styles = csswidth: 100%; padding: 0 10px; border: 1px solid black; font-size: 14px; font-weight: bold; margin: 5px 0 0 0; height: 25px; border-radius: 2px;;

const titleStyles = csswidth: 20%; height: 5vh; text-align: center; padding: 5px 25px; font-style: italic; font-size: 1rem; color: #fff;;

const StyledOpen = styled.td${titleStyles}; background-color: #ce4848;;

const StyledJodi = styled.td${titleStyles}; color: #000; background-color: #37e180;;

const StyledClose = styled.td${titleStyles}; background-color: #000;;

const StyledInput = styled.input${styles};

const StyledOpenInput = styled.inputbackground-color: #ce4848; ${styles};

const StyledCloseInput = styled.inputcolor: #fff; background-color: #000; ${styles};

function Jodi({ jodiArr = [] }) {
// eslint-disable-next-line prefer-const
let active = [1, 1]; // row and column, so it would point to 1C as active.

const current = useTraversalThroughInputs(active);
const jodi = [...jodiArr];
const row = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const column = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

useEffect(() => {
    // select the input element. depends on the structure of your table.
    const tableBody = document.querySelector('#table-body ');
    tableBody.focus();
    // useEffect you be triggered every time active has been changed, and will change focus to your new active cell.
}, [active]);

const openClose = jodi.slice(0, 10);

console.log(jodi);

return (
    <>
        <Grid container spacing={1} component="table" direction="column" justifyContent="space-between">
            <thead>
                <Grid item component="tr" sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <StyledOpen>Open</StyledOpen>
                    <StyledJodi>Jodi</StyledJodi>
                    <StyledClose>Close</StyledClose>
                </Grid>
            </thead>
            <tbody id="table-body">
                {openClose.map((open, index) => {
                    const jodis = jodi.splice(0, 10);
                    // eslint-disable-next-line prefer-const
                    let indexJodi = index * 10;

                    return (
                        <tr key={open} id={row[index]}>
                            <Grid item xs={1} md={1} xl={1} component="td">
                                <label htmlFor={`OPEN_${open}`}>{open}</label>
                                <StyledOpenInput type="text" id={column[index]} name={`OPEN_${open}`} />
                            </Grid>
                            {jodis.map((jodi, indexJ) => (
                                <Grid item key={indexJodi + indexJ} xs={1} md={1} xl={1} component="td">
                                    <label htmlFor={`Jodi_${jodi}`}>{jodi}</label>
                                    <StyledInput type="text" id={column[index]} name={`Jodi_${jodi}`} />
                                </Grid>
                            ))}
                            <Grid item key={open + 2} xs={1} md={1} xl={1} component="td">
                                <label htmlFor={`CLOSE_${open}`}>{open}</label>
                                <StyledCloseInput type="text" id={column[index]} name={`CLOSE_${open}`} />
                            </Grid>
                        </tr>
                    );
                })}
            </tbody>
        </Grid>
    </>
);
}

Jodi.propTypes = {
jodiArr: PropTypes.array
};

export default Jodi;
`

Here is My Array that I am passing to this component👇🏻
`const jodiArr = [
"00", "01", "02", "03", "04", "05", "06", "07", "08", "09",
"10", "11", "12", "13", "14", "15", "16", "17", "18", "19",
"20", "21", "22", "23", "24", "25", "26", "27", "28", "29",
"30", "31", "32", "33", "34", "35", "36", "37", "38", "39",
"40", "41", "42", "43", "44", "45", "46", "47", "48", "49",
"50", "51", "52", "53", "54", "55", "56", "57", "58", "59",
"60", "61", "62", "63", "64", "65", "66", "67", "68", "69",
"70", "71", "72", "73", "74", "75", "76", "77", "78", "79",
"80", "81", "82", "83", "84", "85", "86", "87", "88", "89",
"90", "91", "92", "93", "94", "95", "96", "97", "98", "99"];

export default jodiArr;