I am trying to build searchlist for the searchbar and the list should be change color when cursor is placed their and got selected when clicked from list of item shown.

searchlist.jsx:

import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';

function SearchList({TitleArray,setSearchQuery}) {
  return (
   <>
    <div className="Container_SearchList">
    {
            TitleArray.map(m=>{
                return   <p
                key={m}
                onClick={e=>setSearchQuery(m)}
                className='titleItem'> 
               <FaSearch/>
            {m}
            </p>  
          })
      
        }   
    </div>
    </>
  )
}

export default SearchList;

searchlist.css:

.Container_SearchList {
    background-color: white;
    width: 90.75%;
    position: absolute;
    top:2.7rem;
    height: fit-content;
    z-index: 91;
}

.titleItem {
    margin: 0;
    padding: 0.5rem;
    cursor: pointer;
}

.titleItem div p:hover {
    background-color: rgba(166,202,234,0.516);
}

enter image description here

When cursor is placed on the name, the color should change and the name should get selected

I'm working with the react-pdf library and attempting to add a custom onClick event handler to the PDFDownloadLink component. The goal is to trigger a custom download action when the user clicks to download the PDF. However, when I add the onClick handler, I encounter an error message that says, "Check Internet Connection." Strangely, if I remove the onClick event, the file downloads correctly.

Here's the relevant code snippet:

<div key={uuid()} className={classes.__wrapper}>
  <PDFDownloadLink
    onClick={onDownload} // Problematic onClick
    style={{ textDecoration: "none", color: "black" }}
    fileName={`${sku}.pdf`}
    document={<PDFDocument pages={pages} />}
  >
    {({ loading, blob }) =>
      loading ? <PDFLoader /> : <FileDownloadLink blob={blob} sku={sku} />
    }
  </PDFDownloadLink>

</div>

The onDownload function is meant to handle the download logic, and it works fine when not used in the onClick event. I suspect that there might be an issue with how the onClick event is being handled.

Can someone help me understand why adding the onClick event is causing this error, and how I can resolve it to trigger the custom download action successfully?

I have a group of buttons that do not console.log when they are clicked. They are nested within a few divs and have been appended through another function. When the .finger buttons are clicked, they do not become active, even though they are supposed to change their background color through CSS when being clicked. The .stopButton does not become active/change its background color even though it is specified through CSS. The .startButton, when clicked, appends these new buttons and works.

Below is my code. If you need the rest of it, please let me know.

JS (Using JQuery)

//What will happen when the start button is pressed. Basically, reset everything
//and take to first stage of game. Must clear the Start Button and title if pressed.
function startButtonPressed(indexStartButton){
    hideStartScreenEle(indexStartButton);
    resetVars();
    startGame();
}


//Hides display of startScreen ele
//Realize now that I can remove the div completely, but might want to use it
//later
function hideStartScreenEle(indexStartButton){
    $(".startScreen").eq(0).css("display", "none");
    $(".startButton").eq(indexStartButton).css("display", "none");
}

//Resets all variables
function resetVars(){
    //Ensures each finger has full health before beginning
    $.each(fingerStatusArray, function(index){
        fingerStatusArray[index] = 5;
    });
    //Clears out the appendToMe div for new children
    $('.appendToMe').empty();
}

//Sets up game, assumes everything else is already hidden
//Creates div with 6 slots, one for each finger + palm
//Hopefully aligned
function startGame(){
    //Appends the flex containers
    $(".appendToMe").append("<div class='handHolder'><div class='fingerHolder'></div><div class='palmHolder'></div></div>");
    //Appends the thumb
    $(".fingerHolder").append("<button class= 'fingerButton thumb'></button>");
    //Appends the other fingers
    for (let i = 0; i < 4; i++) {
        $(".fingerHolder").append("<button class='fingerButton'></button>");
    }
    //Appends the mission div and text div. Quest text/line
    $(".appendToMe").append("<div class='mission'><div class='missionText'></div></div>");
    //Adds the first mission text paragraph
    $(".missionText").append("<p>"+missionTextArray[0][0]+"</p>");
    //Appends the stop button
    $(".appendToMe").append("<button class='stopButton'>Stop?</button>");
}

//Original button that runs the function that appends the rest of the buttons. Works
//After being pressed, it and the div it is contained in have their display changed to none
$(".startButton").on("click", function() {
    console.log($(this).index(".startButton"));
    startButtonPressed($(this).index(".startButton"));
} );

//One stop button. Does not work, but becomes active.
$(".stopButton").on("click", function() {
    console.log("stop button pressed");
} );
//There are five fingers, each is a button. Does not work when clicked, but becomes active.
$(".fingerButton").on("click", function() {
    console.log("finger clicked");
} );

CSS

.appendToMe {
    width: 100vw;
    text-align: center;
    background: cyan;
    pointer-events: none;
}

.handHolder {
    background: steelblue;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width:760px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    pointer-events: none;
}

.fingerButton {
    pointer-events: all;
    width: 140px;
    height: 340px;
    background: burlywood;
    border-width: 0px;
}

.fingerButton:active {
    background: orange;
}

.stopButton{
    background: firebrick;
    font-size: 80px;
    width: 10vw;
    height: 10vh;
}

.stopButton:active {
    background: blue;
}

HTML on Page Load

<!DOCTYPE html>
<html>
    <head>
        <title>Free Your Fingers 2.0.0</title>
        <script  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
        <script type="text/javascript" src="../js/freeYourFingers_2_0_0.js" defer></script>
        <link rel="stylesheet" type="text/css" href="../css/freeYourFingers_2_0_0.css">
    </head>
    <body>
        <div class="appendToMe"></div>
        <div class="startScreen">
            <div class="gameTitle">
                <h1>Free Your Fingers</h1>
            </div>
            <div class="startButtonDiv">
                <button class="startButton">Awesome Text</button>
            </div>
            <div class="startButtonDiv">
                <button class="startButton">Saucsome Text</button>
            </div>
            <div class="startButtonDiv">
                <button class="startButton">Cool text</button>
            </div>
        </div>
    </body>
</html>

HTML structure after new divs and buttons are appended. The .startScreen is where the .startButton was:

Body
--- <div class="appendToMe"></div>
------ <div class="handHolder"></div>
--------- <div class="fingerHolder"></div>
------------ <button class="finger thumb"></button>
------------ <button class="finger"></button>
------------ <button class="finger"></button>
------------ <button class="finger"></button>
------------ <button class="finger"></button>
--------- <div class="palmHolder"></div>
------ <div class="mission"></div>
------ <button class="stopButton"></button>
--- <div class="startScreen" style="display: none;"></div>

I have tried changing the visibility of the different divs. The parent divs were set to hidden while the buttons that needed to be pressed were set to visible. This did not result in any change.

When I set the parents' pointer-events to none and the buttons' pointer-events to all, the buttons became active (change their background color), but did not execute any code.

When I had both the parents' visibilities' set to hidden, the buttons' visibilities' set to visible and the parents' pointer-events set to none and the buttons' pointer-events to all, the buttons would become active (change background color), but would not execute code.

I also tried event.stopPropagation(), but I most likely did not implement it properly and would be willing to try other solutions involving it.

I tried completely removing the .startScreen with .remove(). This did not have any effect on the problem.