What I've noticed when using Modals in React is when the component is rendered, the body of the Modal is executed even if the visible state is false.
Example:
render() {
return (
<Modal
title="Basic Modal"
visible={false}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
{console.log('visible is false but content is being executed!')}
</Modal>
);
}
I want to execute the entire Modal only if the visible prop is true. Is there a way to do it?
I'm using this basic Modal Component: https://ant.design/components/modal/