title: How to dynamically disable the button of antd modal using button props
body: <p>I have an antd Modal, i am trying to validate a field and provided validation to it. How can i enable/disable the Ok button based on the validation. If the validation is successful then button should be enabled else disabled.</p>
  <pre><code>&lt;Form&gt;
      &lt;Modal
        title={modalHeader}
        okText=&quot;ADD FIELD&quot;
        cancelText=&quot;CANCEL&quot;
        visible={visible}
        onCancel={onCancelHandler}
        onOk={() =&gt; onAddFieldHandler(fieldName)}
        width={600}
        okButtonProps={{disabled:true}}
      &gt;
        &lt;p&gt;Please provide name&lt;/p&gt;
        &lt;Form.Item
        name=&quot;fieldName&quot;
        rules={[{ required: true, message: 'Please enter name' }]}
        &gt;
        &lt;FieldNameInput
          placeholder=&quot;Field name...&quot;
          value={fieldName}
          onChange={(event) =&gt; setFieldName(event.target.value)}
  
        /&gt;
        &lt;/Form.Item&gt;
      &lt;/Modal&gt;
      &lt;/Form&gt;
  </code></pre>