Estoy implementando un modal en mi aplicación de reacción, pero enfrento el error extraño, Error: Expected `onClick` listener to be a function, instead got a value of `object` type. . Lo que es confuso aquí es el hecho de que implementé el modal en otra parte de la aplicación usando la misma lógica y no produce tal error.
A continuación se muestran fragmentos importantes del código.
índice.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 testperfilGuardar.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;Necesitas extraer los accesorios que recibes.
Prueba esto :
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;