title: How to bind onClick to li and button inside it using react js
body: <p><a href="https://i.stack.imgur.com/0ILja.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0ILja.png" alt="enter image description here"></a> 1. on click of list user should see details of list
   2. on click of remove icon user will be displayed with remove button inside li and in this case point1(mentioned above should not get execute)
   3. on click of remove button list should be executed</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ListComponentWithButton = React.createClass({
    
    getInitialState: function () {
      return {
        'isDelete' : false
      }
    },
    chooseProfile:function (val) {
    //should be executed when user click on li on normal scenario
      console.log('choose',val);
    },
    onDeleteClick: function(val){
    //executed while rendering
    //but it is supposed to be executed on click and onclick is not triggering this function
      console.log(val);
    },
    toggleDelete: function () {
      this.setState({
        'isDelete' : !this.state.isDelete
      })
    },
    render: function(){
    var List =[];
    var ListSource = [{
                      "alias": "John Player Peter England",
                      "id": "1"
                  },{
      "alias": "John Player Peter England2",
                      "id": "2"
      }]
    ListSource.map(function (val, index) {
        List.push(
          &lt;li key={index}  onClick={this.chooseProfile.bind(null,val.id)}&gt;
            &lt;div className="profile_list_row"&gt;
              &lt;p className="initial"&gt;{val.alias}&lt;/p&gt;
              &lt;p className='profile_row_icon'&gt;
                  &lt;span className="fontcon-arrow-right"&gt;&lt;/span&gt;
              &lt;/p&gt;
              &lt;p className='remove'&gt;
       &lt;button onClick={this.onDeleteClick(null,this.props.val.id)}&gt;
      &lt;span&gt;Remove&lt;/span&gt;
       &lt;/button&gt;
      &lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        );
      },this)
      return (
        &lt;div&gt;
    &lt;ul&gt;
     {List}
    &lt;/ul&gt;
    &lt;div&gt;
     &lt;div&gt;
      &lt;div&gt;
        &lt;button className={' '+(this.state.isDelete ? 'hide':'show')}&gt;
       &lt;span&gt;Add List&lt;/span&gt;
        &lt;/button&gt;
        &lt;button className={' '+(this.state.isDelete ? 'hide':'show')}onClick={this.toggleDelete}&gt;
       &lt;span&gt;Remove list&lt;/span&gt;
        &lt;/button&gt;
        &lt;button className={' '+(this.state.isDelete ? 'show' : 'hide')} onClick={this.toggleDelete}&gt;
       &lt;span className="pad-l10"&gt;Done&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
     &lt;/div&gt;
      )
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>