skilltag01.js

import React from "react";
import ReactDom from "react-dom";

class SkillTag extends React.Component {
  tagNames() {
     return ['HTML', 'CSS', 'JavaScript', 'Ruby', 'Haskell'].join(', ');
  }
  constructor(props) {
    super(props);
    this.state = {
      hovered: false,
      selected: []
    }
  }
  styles() {
    return {
      container: {

      },
      selectedTags: {

      },
      tagInput: {

      },
      tagOptions: {
        padding: 0,
        listStyleType: 'none',
        cursor: 'pointer'
      }
    }
  };
  onClick(num, index, aaa, bbb) {
    console.log(num)
    this.setState({
      selected: this.state.selected.push(num)
    })
  }
  tags() {
    return {

    }
  }
  render() {
    const styles = this.styles();
    const tagNames = this.tagNames();
    return (
      <div>
        <div><span>{tagNames}</span></div>
        <input></input>
        <ul style={styles.tagOptions}>
          <li onClick={::this.onClick}>{tagNames}</li>
        </ul>
      </div>
    );
  }
}

ReactDom.render(
  <SkillTag />,
  document.getElementById('skilltag-container')
);