Show popup from another component using functions in react (.jsx)? - reactjs

Question

Hello there I'm new with Reactjs and just have a quick question.
I have a modal component that I want to show up when a function is called from another component.
The modal component
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
const toggle = () => {
setOpen(!open);
};
return (
<div>
<Button onClick={toggle}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={toggle}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;
This is the function that I need to show up the popup when it's called
const finishPayment = () => {
console.log('just checking if this function is called properly');
return (
<Popup
toggle={this.toggle}
title='Success'
body='Welcome, everything was fine.'
/>
);
};
Can someone help me how to figure out this?
I think I need to pass something as props, but not sure what.
Thanks!

Answer 1

Your buttons are using "onClick" events, therefore, you must pass a function as argument, but you are passing a constant. Convert your "toggle()" arrow function to function or implement another arrow function inside the "onClick" events, so as in the examples below:
With arrow function:
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
const toggle = () => {
setOpen(!open);
};
return (
<div>
<Button onClick={() => toggle()}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={() => toggle()}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;
With vanilla/traditional functions:
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
function toggle() {
setOpen(!open);
};
return (
<div>
<Button onClick={toggle}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={toggle}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;