title: Ant Design: How can I handle Button in Card extra onClick event?
body: <p>I want to click X Button in Card extra to visible &quot;Confirm Remove Todo modal&quot;.</p>
  <h2>UI:</h2>
  <p><a href="https://i.stack.imgur.com/ftOdy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftOdy.png" alt="UI" /></a></p>
  <h1>But...</h1>
  <p>the reality when I click X Button then it visible &quot;Edit Todo modal&quot; from Card event instead.</p>
  <p><a href="https://i.stack.imgur.com/vW4GM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vW4GM.png" alt="After click X Button" /></a></p>
  <p>how can I fix it?</p>
  <h2>Code:</h2>
  <pre class="lang-js prettyprint-override"><code>            {todos.map(todo =&gt; (
                &lt;Card
                  className={styles.CardTodo}
                  headStyle={{ textAlign: 'left' }}
                  bodyStyle={{ textAlign: 'left' }}
                  key={todo._id}
                  title={todo.title}
                  onClick={() =&gt; handleSelectTodo(todo._id)}
                  extra={
                    &lt;Button
                      type=&quot;danger&quot;
                      shape=&quot;circle&quot;
                      style={{ color: 'white', zIndex: 10 }}
                      onClick={() =&gt; handleRemoveTodo(todo._id)}
                    &gt;
                      X
                    &lt;/Button&gt;
                  }
                &gt;
                  {todo.description}
                &lt;/Card&gt;
              ))}
  </code></pre>
  <p>.</p>
  <hr />
  <p>.</p>
  <h1>Thanks very much, guys</h1>
  <p>e.stopPropagation() is useful for me.</p>
  <h2>And then I found another problem.</h2>
  <p>It is handleRemoveTodo() is the function that opens another modal.
  But that modal didn't get &quot;Todo object&quot;</p>
  <p>when I remove e.stopPropagation(), the modal will get Todo Object again
  <a href="https://i.stack.imgur.com/hjbKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hjbKe.png" alt="enter image description here" /></a></p>
  <h2>Code:</h2>
  <h2>Todo component</h2>
  <pre class="lang-js prettyprint-override"><code>  const handleRemoveTodo = () =&gt; {
      setModalConfirmRemoveVisible(true)
    }
  
    const handleConfirmRemove = async todoId =&gt; {
      console.log('Hello', todoId)
      setIsRemoveLoading(true)
  
      try {
        await axios.delete(`/todos/${todoId}`, apiConfig)
      } catch (err) {
        console.error(err)
        console.error(err.response.data)
      }
      await fetchTodos()
  
      setModalConfirmRemoveVisible(false)
      setIsRemoveLoading(false)
    }
  
    return (
        {modalConfirmRemoveVisible &amp;&amp; (
          &lt;ModalConfirmRemoveTodo
            visible={modalConfirmRemoveVisible}
            todo={todo}
            isRemoveLoading={isRemoveLoading}
            onConfirmRemoveTodo={handleConfirmRemove}
            onCancel={() =&gt; setModalConfirmRemoveVisible(false)}
            onConfirmRemove={handleConfirmRemove}
          /&gt;
        )}
    )
  </code></pre>
  <h2>Modal component</h2>
  <pre class="lang-js prettyprint-override"><code>const ModalConfirmRemoveTodo = props =&gt; {
    const { visible, isRemoveLoading, onCancel, todo, onConfirmRemove } = props
    console.log('ModalConfirmRemoveTodo', todo)
    return (
      &lt;&gt;
        &lt;Modal
          visible={visible}
          title={&lt;Title level={3}&gt;Remove Todo&lt;/Title&gt;}
          okButtonProps={{ loading: isRemoveLoading, disabled: isRemoveLoading }}
          okText=&quot;Remove&quot;
          okType=&quot;danger&quot;
          onOk={() =&gt; onConfirmRemove(todo._id)}
          onCancel={onCancel}
        &gt;
          Want delete {todo.title} ?
        &lt;/Modal&gt;
      &lt;/&gt;
    )
  }
  </code></pre>