React onClick function only fires once upon rendering to DOM
<p>I have the following example of a React component that renders tags to the DOM based on the component's state. The intention is to remove the <code>item</code> from the state's <code>tags</code> array once the <code>delete_tag</code> anchor is clicked. For now, I've just set it to alert the user.</p>

<pre><code>  getInitialState: function () {
    return {
      el: 'times',
      tags: ['dog', 'cat']
    };
  },

  render: function () {
    let that = this;
    return (
      &lt;div id={this.state.el}&gt;
        &lt;div className="center-form"&gt;
          &lt;div className="tag_div"&gt;
            { this.state.tags.map(function(item) {
                return (
                &lt;div className="tag"&gt;
                  {item}
                  &lt;a className="delete_tag" onClick={alert(item)}&gt;&lt;/a&gt;
                &lt;/div&gt;
                );
              })
            }
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
</code></pre>

<p>Using the above code, immediately before every tag is rendered, the user gets alerted. Afterwards, the tags render, but the <code>delete_tag</code> anchor does not respond to any clicks.</p>

<p>I found this odd given that other functions in this component, being used in a similar way with <code>onClick={that.function()}</code> seem to work as intended. <strong>Why isn't this <code>onClick</code> attribute behaving as expected?</strong></p>