I am working on creating a dynamic Search List for the Search Bar that changes color when hovered over and gets selected when clicked from the displayed item list.
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);
}
When the cursor hovers over a name, it should change color and be selected