TagInput-Component for React

TagInput.css

.tags-input {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
}
.tags-input .tag-entry {
  user-select: none;
  cursor: pointer;
  border: 1px #e8e8e8 solid;
  color: #e8e8e8;
  border-radius: 15px;
  background-color: #232323;
  text-align: center;
  height: 20px;
  padding: .1rem 0.5rem;
  margin-right: .4rem;

  font-size: 1.2rem;
  white-space: nowrap;

  transition: all 0.10s ease-in-out;
}
.tags-input .tag-entry:hover {
  background-color: #065587;
  background-image: url('../../media/ic_clear_white_24px.svg');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 20px;
}
.tags-input .tag-entry:active {
  background-color: #086caa;
}

TagInput.js

import React, { Component } from 'react';

import './TagInput.css';

/**
 */
class TagInput extends Component {
  render() {
    var { tags } = this.props;

    const renderTags = () => {
      return tags.map((tag, index) => {
        return <span key={index} className="tag-entry"
          onClick={() => {
            if (typeof this.props.handleTagRemoved === "function") {
              this.props.handleTagRemoved(tag);
            } else {
              console.error("TagInput needs a 'handleTagRemoved' function!");
            }
          }}>{tag}</span>;
      });
    };

    const handleKeyPress = (e) => {
      if (e.key === 'Enter') {
        let enteredTag = this.refs.tags.value;
        if (enteredTag) {
          if (typeof this.props.handleTagAdded === "function") {
            this.props.handleTagAdded(enteredTag);
          } else {
            console.error("TagInput needs a 'handleTagAdded' function!");
          }
        }
        this.refs.tags.value = "";
      }
    };

    return (
      <div className="tags-input">
        <input type="tags" ref="tags" list="tags" placeholder="e.g. type 'WIP', then press ENTER"
          onKeyPress={handleKeyPress}/>
        { renderTags() }
      </div>
    );
  }
}

export default TagInput;