Error: Expected `onClick` listener to be a function, instead got a value of `object` type

I am implementing a modal in my react app but face the weird error, Error: Expected `onClick` listener to be a function, instead got a value of `object` type.. What’s confusing here is the fact that I have implemented the modal in another part of the application using the same logic and it doesn’t produce such error.

Below are important snippets of the code.

index.js

import React, { useState } from "react";
import ProfileSave from "../../components/modal/profileSave";
const test = () => {

  const [saveModal, setSaveModal] = useState(false);
  const [save, setSave] = useState(false);

  return (
<>
<button className="w-[165px] h-[60px] text-center px-4 py-2 text-sm text-white bg-[#3A76BF] rounded-md font-bold text-[16px]" onClick={saveShowModal}>
  Save
</button>

{saveModal && (
  <ProfileSave
    open={saveModal}
    handleClose={() => setSaveModal(!saveModal)}
    handleSave={handleSave}
  />
)}
</>
export default test

profileSave.js

import React from "react";

const ProfileSave = (open, handleClose, handleModal) => {
  return open ? (
    <div className="fixed inset-0 z-10 overflow-y-auto">
      <div
        className="fixed inset-0 w-full h-full bg-black opacity-40"
        onClick={handleClose}
      ></div>
    </div>
  ) : (
    ""
  );
};

export default ProfileSave;

Answer

You neet to extract the props that you component recive

Try this :

import React from "react";

const ProfileSave = ({open, handleClose, handleModal}) => {
  return open ? (
    <div className="fixed inset-0 z-10 overflow-y-auto">
      <div
        className="fixed inset-0 w-full h-full bg-black opacity-40"
        onClick={handleClose}
      ></div>
    </div>
  ) : (
    ""
  );
};

export default ProfileSave;

Advertisement

Answer