title: How to get value of a dynamically created component in react.js?
body: <p>I am having trouble getting value of dynamically generate component. I am able to target the child component. However I am not being to get the value of the child component. Not sure what I am missing. The set-up is little bit wired because I am using object of Array (using Firebase for database). Fiddle: <a href="https://jsfiddle.net/rexonms/g3nscf0h/" rel="nofollow">https://jsfiddle.net/rexonms/g3nscf0h/</a></p>
  
  <pre><code>// Javascript jsx
  &lt;script type="text/jsx"&gt;
       var data = {
          a: 'all',
          b: 'ball',
          c: 'cat'
      };
  
  
  
  var MyComp = React.createClass({
  
  getInitialState: function(){
      return{
          data: this.props.data
      };
  },
  
  handleClick: function(e){
      console.log(e.target);
      console.log(e.target.value)
  },
  
  
  render: function() {
      var o = this.props.data;
  
      return(
          &lt;div className="words"&gt;
              {Object.keys(o).map(function(k) {
                  return (
                      &lt;div key={k} className="word" onClick={this.handleClick} value={o[k]}&gt; {o[k]} &lt;/div&gt;
                  );
              }.bind(this))}
          &lt;/div&gt;
  
      );
  }
  });
  
  
  
  React.render(&lt;MyComp data={data} /&gt; , document.getElementById('container'));
  
  
  &lt;/script&gt;
  </code></pre>