Display div on hover for mapped buttons - html

Question

So I have a group of buttons that are displayed using a map. When I hover over one of these buttons I want a black box to appear on the side of it. This black box will be developed into a preview.
However, because of the map function, the rest of the buttons get a preview when I hover over one button. This is how the buttons look before the hover. You have a subject, and the courses are listed under this. Both the courses and subjects are mapped.
When I hover over a single button all the button previews are set to true. When I move my mouse off the button, all the previews are removed. How can I single out a button to have a specific preview?
export default function Yeartwo() {
const [grade, setGrade] = useState(localStorage.getItem('grade'));
const [preview, setPreview] = useState(false);
let grades = Object.keys(courseData)
let nextGrade = grades[Object.keys(courseData).indexOf(grade)+1]
let subjects = courseData[nextGrade].subjects
let courses = courseData[nextGrade].classes
function coursePreview(e) {
e.preventDefault();
console.log('hovered')
setPreview(true)
}
return (
<div className="courseSelect">
{subjects.map((subject, index) => (
<div key={index}>
<h2 className="subject">{subject}</h2>
<div className="courses">
{courses[subject].map((course, index) => (
<div key={index}>
<button value={subject} className="course_btn" onMouseEnter={() => setPreview(true)} onMouseLeave={() => setPreview(false)}>{course}</button>
{preview && <div className="preview"> {course} </div>}
</div>
))}
</div>
</div>
))}
</div>
)
}

Answer 1

Reorder your preview state to contain an object instead of booleans. The object should be in the following format: { 'course1': boolean, 'course2': boolean, ..., 'courseN': boolean } - course is the key and the boolean value represents whether the preview for this item should be shown or not.
Therefore, your condition should look like this: {preview['course'] && <div className="preview"> {course} </div>}
And update your listeners to be like this: {... onMouseEnter={() => setPreview({...preview, 'course': true}) ...} and the same for the onMouseLeave method.