Having prop validation error in JSX during onclick as getting passed function as not function?

Question

Having prop validation issue where I am passing a funciton as a prop but error is coming saying it is not function.

The Contact.jsx:

 import Avatar from "./Avatar";
import PropTypes from "prop-types";

export default function Contact({ id, username, func, selected, online }) {
  return (
    <>
      <div
        key={id}
        onClick={() => func(id)}
        className={
          "flex border-b border-blue-100  items-center gap-2 cursor-pointer " +
          (selected ? "bg-blue-200" : "")
        }
      >
        {selected && <div className="w-1 bg-blue-500 h-12 rounded-r-md"></div>}
        <div className="flex gap-2 py-2 pl-2 items-center">
          <Avatar online={online} username={username} userId={id} />
          <span> {username}</span>
        </div>
      </div>
    </>
  );
}


Contact.propTypes = {
  id: PropTypes.string.isRequired,
  username: PropTypes.object.isRequired,
  func: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  online: PropTypes.bool.isRequired,
};

the point where the props are being passed

 <Contact
            id={userId}
            username={onlinePeopleExcludingOurUser[userId].username}
            func={() => setselectedUserId(userId)}
            selected={userId == selectedUserId}
            online={true}
          />

const [selectedUserId, setselectedUserId] = useState(null);

setselectedUserId is a useState fn

I tried changing prop type, and also using AI but no solution whatsoever I am still getting error as func is not recognized as a function in onclick in Contact.jsx.

Answer 1

Try do this:

<Contact
    ...
     func={setselectedUserId}
    ...
/>