I am working on react js and I am fresher.I am stuck at one problem from sometime now. Below is the functionality I want to achieve: In a modal with search functionality how to navigate results of search with arrow up and down keys.I am finding it tough because results are dynamic so giving them refs is tough.How to acheive this? Below is the Code:
{showFirmModal && (
<div className="firmContainer">
<div className="belowNavbar">
<div className="firmListHeadingDiv">
<h3 className="productText">Firm List</h3>
</div>
<div className="search-closeDiv">
<div>
<input
className="searchBar2"
type="text"
placeholder="Search by Firm Name"
onChange={(event) => {
handleFirmChange(event);
}}
defaultValue=""
ref={inputRef}
autoFocus={true}**In this search feild I enter letters and result comes in table below**
/>
</div>
<div>
<AiOutlineClose
className="iconsDiv"
type="button"
color="whiteSmoke"
size={23}
onClick={(event) => {
closeFirmModal();
emptyFirmSearch();
}}
/>
</div>
</div>
</div>
<div className="productTable">
<table className="tableDiv">
<tbody>
<tr>
<th className="thDiv">S.No </th>
<th className="thDiv">Firm Name</th>
<th className="thDiv">Address</th>
<th className="thDiv">Action</th>
</tr>
{firm_Data ? (
firm_Data.map(function (item, index) {
return (
<tr key={index}> **Table row starts here **
<td className="tdDiv SD">{index + 1}</td>
<td className=" FD">{item.firmName}</td>
<td className=" AD">{item.state}</td>
{/* <td className=" AD">{item.state}</td> */}
<td className="tdDiv">
<button
onClick={(event) => {
handleOnClickModalFirmChange(
event,
item.firmName
);
closeFirmModal();
emptyFirmSearch();
handleSelectedFirm(item.firmName);
}}
onKeyDown={(event) => {
handleModalFirmChange(event, item.firmName);
handleSelectedFirm(item.firmName);
}}
style={{
background: "#015998",
color: "whitesmoke",
borderRadius: "3px",
}}
>
Select Firm ** Each firm rom has select button.When I navigate rows focus should be on this button **
</button>
</td>
</tr> **Table row Ends here **
);
})
) : (
<tr>
<td colSpan="4">"no data found"</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
)}
I tried adding refs but array elements are dynamic so we cannot add refs I think.Or if we can how?