In ReactJs Navigating through search results of a modal with arrow up and down keys,with focus on a button in every row

180 Views Asked by At

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?

0

There are 0 best solutions below