title: How do I include an onCLick inside a for loop in React?
body: <p>I'll try my hardest to keep this as concise as possible.</p>
  
  <p>I want to be able to delete items from my json data state(library) but at the moment i can't even get a simple console.log to fire when the "Delete" button is clicked. </p>
  
  <p>Every thing displays perfectly on load.
  I get an error when I write in the <code>onClick={this.deleteClickHandler.bind(this)}</code> event for the <code>"Delete"</code> button. </p>
  
  <p>Parent component: </p>
  
  <pre><code>   constructor(){
  
    super();
    this.state = {
      test: "SiteFront State",
      library : {
        "copy" : {
          "name" : "Copy",
          "input" :  "CMD + C",
          "os" : "All"
        },
        "paste" : {
          "name" : "paste",
          "input" :  "CMD + V",
          "os" : "All"
        }
      },
      libraryKeys:null
    };
  };
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>componentDidMount(){
      this.SetUpItemsHandler();
  };
  
  componentWillReceiveProps(){
    this.SetUpItemsHandler();
  }
  
  deleteClickHandler(e){
    console.log("delete Button Clicked");
  };
  
  SetUpItemsHandler(){
    var libraryKeys = Object.keys(this.props.library);
    document.getElementById("libraryInner").innerHTML = "";
    for(var i = 0;i &lt; libraryKeys.length;i++){
      document.getElementById("libraryInner").innerHTML += "&lt;li key={i}&gt;"+
        "&lt;h2&gt;Name: "+ this.props.library[libraryKeys[i]].name +"&lt;/h1&gt;"+
        "&lt;button onClick={this.deleteClickHandler.bind(this ,i)}&gt;Delete&lt;/button&gt;"
      "&lt;/li&gt;";
  };
  };
  </code></pre>
  
  <p><code>The onClick={this.deleteClickHandler.bind(this)}</code> event fires an error in the console:</p>
  
  <blockquote>
    <p>(index):16 Uncaught TypeError: Cannot read property 'bind' of
    undefined(…)</p>
  </blockquote>
  
  <p>Am I including the key value correctly? What am I missing? 
  I have used .map functions with arrays but am not sure the ideal way to do it with json key objects so I've tried to use a for loop instead. Is this wrong?</p>
  
  <p>Any help is much appreciated.
  Thank you,
  Moe</p>
  
  <p>EDIT: 
  Inside my render function I have tried to include but it's not taking, nothing displays without any errors in the console:</p>
  
  <pre><code>  render(){
  
      var listItems = function(){
        var libraryKeys = Object.keys(this.props.library);
        document.getElementById("libraryInner").innerHTML = "";
        for(var i = 0;i &lt; libraryKeys.length;i++){
          document.getElementById("libraryInner").innerHTML += "&lt;li key={i}&gt;"+
          "&lt;h2&gt;Name: "+ this.props.library[libraryKeys[i]].name +"&lt;/h1&gt;"+
          "&lt;button onClick={this.deleteClickHandler.bind(this)}&gt;Delete&lt;/button&gt;"+
          "&lt;/li&gt;"
        };
    };
  
      return(
        &lt;div&gt;
          Library Here&lt;br/&gt;&lt;br/&gt;
          &lt;div id="library"&gt;
            &lt;ul id="libraryInner"&gt;
              {listItems}
            &lt;/ul&gt;
          &lt;/div&gt;
  
        &lt;AddItemForm
          inputUpdateHandler={this.props.inputUpdateHandler.bind(this)}
          nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)}
          inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)}
          osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)}
          addItemHandler={this.props.addItemHandler.bind(this)}
        /&gt;
  
        &lt;/div&gt;
      );
    }
  </code></pre>