React onClick not changing color of item

user_15836920 0
Viewed 94

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;
reactjs css
2 Answers

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) />

user_20546020

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

user_181361340
Related