React onClick not changing color of item

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

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