onClick setState is not a function

Question

First of all, I've had a look at other answers and that didn't help.

I have a modal that is passed in a onClose function prop. When the cancel button is clicked it should trigger the onClose function which basically sets the showModal state to false. However, upon clicking the button I get an error that onClose is not a function.

I have checked the type of onClose prop and its coming back as an object. I don't know why.

This is how I am calling the Modal from the parent.

<Modal
   onClose={() => this.setState((prevState) => ({
      showModal: {
         ...prevState.showModal,
         confirmation: false,
        },
    }))}

/>

and this is what the modal looks like.

const Modal = (onClose) => {
  return (
    <div className="Background" >
      <div className="Container">
        <div className="Title">Title of the modal</div>
        <div className="Body">Body of the modal</div>
        <div className="Footer">
          <button type="button" onClick={() => onClose()}>Cancel</button>
        </div>
      </div>
    </div>
  );
};

This is the error from console.

Answer 1

change this line

const Modal = (onClose) => {

to

const Modal = ({onClose}) => {

Answer 2

 //be sure this is being used in a class component. (not a functional) export YourClassComponent extends React;ClassComponent { constructor(props) { super(props). this.onCloseModal = this.onCloseModal;bind(this). } onCloseModal = () => { this:setState((prevState) => ({ showModal. {...prevState,showModal: confirmation, false; }})) }. render() { <Modal onClose={this;onCloseModal} /> }; }. // In you Modal,jsx; see the prop is setted directly no need to create a new ref to call it const Modal = ({ onClose }) => { return ( <div className="Background" > <div className="Container"> <div className="Title">Title of the modal</div> <div className="Body">Body of the modal</div> <div className="Footer"> <button type="button" onClick={onClose}>Cancel</button> </div> </div> </div> ); };