React onClick not changing color of item - css

Question

I am trying to make it so that when i click a note, the item should become selected and then it will change background color.
I have a console log statement inside the handleNoteClick function, but it is not logging, meaning that the function is not being called
import React, { useState } from "react";
import { NoteItems } from "../noteDisplay/noteDisplay";
import NavItems from "./navItems";
const NoteNav = () => {
const [notes, setNotes] = useState(NoteItems);
const handleNoteClick = (id) => {
const newNoteItems = notes.map((item) => {
if (item.id === id) return { ...item, selected: !item.selected };
else {
return item;
}
});
console.log("yekaj;lksndf");
setNotes(newNoteItems);
};
return (
<nav className="nav-bar">
<div className="nav-content">
{NoteItems.map((items) => (
<NavItems key={items.id} items={items} onClick={handleNoteClick} />
))}
</div>
</nav>
);
};
export default NoteNav;
Array of notes:
const NoteItems = [
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfffffffffffffffffffffffffffffffffffffff",
title: "e"
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: false
},
{
id: uuidv4(),
message: "asdfasdfffffffffffffffffffffffffffffffffffffff",
title: "New Note",
selected: true
}
];
The object that I pass each item of the array into
import React, { useState } from "react";
const NavItems = ({ items }) => {
return (
<div
className={
items.selected ? "second-note-box-selected" : "second-note-box"
}
>
<h1 className="note-title">{items.title}</h1>
<p className="note-content">{items.message}</p>
</div>
);
};
export default NavItems;

Answer 1

There are a couple of problems with your code.
The first and most important is that onClick only works on native DOM elements. What you are doing here <NavItems key={items.id} items={items} onClick={handleNoteClick}/> is passing a prop named onClick to NavItems.
That will not trigger an on click, you need to use that in the component and attach it to a div for instance.
The second is regarding the fact that you are updating notes, but you don't use it during the render.
The third could be that you are iterating over the entire array, just to update one value. You could easily do something like this:
const handleNoteClick =(item) => {
item.selected = !item.selected
console.log('yekaj;lksndf')
setNotes([...notes])
}
And pass item as the argument to handleNoteClick like this:
<NavItems onClick={() => handleNoteClick(item) />

Answer 2

in this line that you mapped your items into NavItem
{NoteItems.map((items)=><NavItems key={items.id} items={items} onClick={handleNoteClick}/>)}
the onClick just point to the function and you cant pass pointer like handleNoteClick(id) because its excuted not pointed and your not passing the id to the function though
do this i think it should work
{NoteItems.map((items)=><NavItems key={items.id} items={items} onClick={()=>handleNoteClick(items.id)}/>)}
and of course you should pass custom prop onClick to your custom component native onclick