Why is my function not being called on click-CodePudding

I have a modal component with the closeModal function, but i can't make this function work on click:

import React from 'react';

interface IProps {
  clearTodos: (e: any) => void;
  closeModal: () => void;
  viewModal: boolean;
  setViewModal: boolean;
}


const Modal: React.FC<IProps> = (clearTodos, closeModal) => {
  return (
    <div className='bg-white w-72 h-72 fixed top-1/2 mt-[-144px] left-1/2 ml-[-144px] rounded-3xl grid place-items-center p-6 shadow-2xl'>
      <h1 className="text-2xl">This will clear all of your tasks. You sure?</h1>
      <button className="bg-red-600 w-20 h-12 rounded-md duration-200 hover:bg-red-800 hover:text-white">Yes</button>
      <button onClick={() => closeModal} className="hover:text-gray-400">No</button>
    </div>
  )
}

export default Modal;

closeModal function:

function closeModal() {
    if (viewModal === true) {
      setViewModal(false)
    }
    console.log("I'm being clicked!")
  }

Yes, i'm a React beginner, and it must be something really simple but i can't quite figure it out. The code is really messy because it was my first project with React and i didn't know about separating the components in different files so i had to do that mid-project and it was terrible. Here's another relevant part of the code:

import React from 'react';
import Modal from './Modal'

interface IProps {
  closeModal: () => void;
  viewModal: boolean;
  setViewModal: boolean;
}

const Layout: React.FC<IProps> = ({viewModal, setViewModal, closeModal}) => {
  return (
    <main className="  flex justify-center flex-row bg-neutral-700">
        ...

          {viewModal ? 
          <Modal clearTodos={clearTodos} viewModal={false} setViewModal={false} closeModal={closeModal}/> 
          : null}
          
      </main>
  )
}

export default Layout;

Edit: I forgot to mention that i indeed tried to change the onClick property to both

<button onClick={() => closeModal()}

which after i click the button returns me this error: Uncaught TypeError: closeModal is not a function

and to

<button onClick={closeModal}

which after i click the button returns me this another error: Uncaught Error: Expected onClick listener to be a function, instead got a value of object type.

https://codesandbox.io/s/vigilant-water-cm3cbe?file=/src/App.tsx Here's the full code if anyone wanna take a look

CodePudding user response：

closeModal is being called in a callback function, but never invoked.

Either remove the callback, or add parentheses to the function

<button onClick={() => closeModal()}

<button onClick={closeModal}

EDIT In addition, your Modal component is pulling out properties of the function directly, instead of destructuring props, like in the Layout component.

Change that declaration of Modal to this:

const Modal: React.FC<IProps> = ({ clearTodos, closeModal }) => {

Take note of the curly braces around the props.

CodePudding user response：

Change this:

<button onClick={() => closeModal}

onClick={() => closeModal()}