import React from 'react'
import Fluxxor from 'fluxxor'
import KeywordListItem from './keywordlistitem'
import KeywordAdd from './keywordadd'

export default React.createClass({
  getInitialState: function() {
    return {
      hidden: false
    }
  },
  render: function() {
    var keywordList = this.props.list.map(function(keyword, keywordIndex){
      return (
        <KeywordListItem chartID={this.props.chartID} keyword={keyword} id={keywordIndex} />
      )
    }.bind(this))
    return (
      <ul className={this.props.className}>
        <h5>Keywords</h5>
        <KeywordAdd chartID={this.props.chartID} />
        {keywordList}
      </ul>
    )
  }
})




 // show: function() {
  //   this.setState({ visible: true });
  //   document.addEventListener("hover", this.hide.bind(this));
  // },
  // hide: function() {
  //   document.removeEventListener("hover", this.hide.bind(this));
  //   this.setState({ visible: false });
  // },
@@ -247,16 +247,281 @@
  %7D%0A  %7D,%0A
+  %0A  show: function() %7B%0A    this.setState(%7B visible: true %7D);%0A    document.addEventListener(%22hover%22, this.hide.bind(this));%0A  %7D,%0A  %0A  hide: function() %7B%0A    document.removeEventListener(%22hover%22, this.hide.bind(this));%0A    this.setState(%7B visible: false %7D);%0A  %7D,%0A  %0A
   render
@@ -930,286 +930,7 @@
 %0A%7D)%0A
-%0A%0A%0A%0A // show: function() %7B%0A  //   this.setState(%7B visible: true %7D);%0A  //   document.addEventListener(%22hover%22, this.hide.bind(this));%0A  // %7D,%0A  // hide: function() %7B%0A  //   document.removeEventListener(%22hover%22, this.hide.bind(this));%0A  //   this.setState(%7B visible: false %7D);%0A  // %7D,
+  %0A

Update keywordlist.js