Why the dialog is rendering many times?

Question

i would like to show a confirmation dialog if a condicion is not correct

in the function to submit the form, i have this condition to show the warnign dialog, this condition if (sections.length && !sections[0].id) {

const [showConfirmationDialog, setShowConfirmationDialog] = useState(false)

  const handleSubmitForm = (values) => {
    ...
    if (sections.length && !sections[0].id) {
      setShowConfirmationDialog(true)
    }
    ...


const handleConfirm =()=> confirm({
      title: 'Do you want to delete these items?',
      content: 'When clicked the OK button, this dialog will be closed after 1 second',
      async onOk() { },
      onCancel() { },
    })

  return (
    <>
      <Form
        autoComplete="off"
        form={form}
        layout="vertical"
        name="section-form"
        onFinish={handleSubmitForm}
        ...
        {showConfirmationDialog  && handleConfirm() }

its rendering many times and i am getting this error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {destroy, update}). If you meant to render a collection of children, use an array instead.

Answer 1

Because the returned value from the confirm function is not a React Component, you should call the confirm function directly not as a component.

You can head to the link https://ant.design/components/modal#modal-demo-hooks to get the examples.