title: OnClick event in React
body: <p>I have one very strange problem.</p>
  
  <p>I have the following link in react</p>
  
  <pre><code>&lt;a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}&gt;
         &lt;span className="regHeaderText"&gt;{this.props.value}&lt;/span&gt;
         &lt;FontAwesome name={this.props.icon} className="faIcon"/&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>And it's looks like : </p>
  
  <p><a href="https://i.stack.imgur.com/2mSZh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mSZh.png" alt="enter image description here"></a></p>
  
  <p>But the problem is if I click on text <em>NEXT</em> or on font awesome icon I get <strong>undefined</strong> as name of the link . </p>
  
  <p>Only if I click somewhere left of text <em>NEXT</em>, in this yellow box only then I get right name.</p>
  
  <p>If I create links instead spans, like :</p>
  
  <pre><code>&lt;a onClick={this.props.onClick} name={this.props.name} style={{cursor: 'pointer', display: 'block', textAlign: 'center'}}&gt;
       &lt;a onClick={this.props.onClick} name={this.props.name} className="regHeaderText"&gt;{this.props.value}&lt;/a&gt;
       &lt;a onClick={this.props.onClick} name={this.props.name}&gt;&lt;FontAwesome name={this.props.icon} className="faIcon"/&gt;&lt;/a&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Then it works, but is there any solution to do it without creating links inside link?</p>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>onClick: function (event) {
      event.preventDefault();
      var field = event.target.name;
      alert("The name is : " + field);
  }
  </code></pre>