how to show focus in first row React js? - reactjs

Question

Code:-
const myRef = React.createRef([]);
const handleKeyDown = (event, ID) => {
//up and Down key
const active = document.activeElement;
active.addEventListener('keydown', function (event) {
switch (event.key) {
case "ArrowUp":
active?.previousElementSibling?.focus();
event.preventDefault();
break;
case "ArrowDown":
active?.nextElementSibling?.focus();
event.preventDefault();
break;
default: break;
}
});
}
const active = () => {
myRef.current.focus()
}
return (
<div className="mainContent">
<div className="tableHeaderBody">
<div className="TableText">PlayList</div> <div className="ClossIcon"><FaCircle style={{ color: "#FC0000", width: "10px", height: "10px", alignItems: "right" }} /></div>
</div>
<div className="tableBody" >
<table className="table">
<Header
headers={headers}
/>
<tbody>
{comments.map((comment) => {
//Display Hex to base64 image format
const base64 = Buffer.from(comment.Thumbnail, 'hex').toString('base64');
//console.log(base64);
const statusContent = () => {
if (comment.Status === 0) {
return <div><BsFillCircleFill style={{ color: "#FF0000", width: "20px" }} /> Not Ready</div>;
} else if (comment.Status === 1) {
return <div><BsFillCircleFill style={{ color: "#41fc00", width: "20px" }} /> Ready</div>;
} else if (comment.Status === 2) {
return <button type="Submit" style={{ backgroundColor: "blue" }}>Cueing</button>;
} else if (comment.Status === 3) {
return <button type="Submit" style={{ backgroundColor: "yellow", color: "Black" }}>Cued</button>;;
} else {
return <button type="Submit">Playing</button>;
}
};
return (
<tr key={comment.idx} tabIndex={comment.idx} className="border_bottom" onKeyDown={(e) => handleKeyDown(e, comment.idx)} onLoad={() => active()} ref={myRef}>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
i using myRef.current.focus() in active = () but it's show me focus in last row when i load the page
i want that when page load focus show in first row and user use up and down key in table row without clicking the table row
enter image description here
As i load the page focus automatically placed in last row show in image how to fix that? please help

Answer 1

What I think is happening, is that onLoad triggers for every rendered row. So when the last row is rendered it is the last time onLoad triggers and focuses on this row. To overcome this issue:
const active = (rowNumber) => {
if (rowNumber === 0) {
myRef.current.focus()
}
}
And in the tag in the onLoad pass it as:
<tr key={comment.idx} tabIndex={comment.idx} className="border_bottom" onKeyDown={(e) => handleKeyDown(e, comment.idx)} onLoad={() => active(comment.idx)} ref={comment.idx === 0 && myRef}>
You are giving all rendered row the same ref, that might cause an issue too so I conditioned it to give the ref only to the first row.