How to use react-tag-input - 3 common examples

var React = require('react');
var _ = require('lodash');
var ReactTags = require('react-tag-input').WithContext;

var Base = require('./Base.react');
var SettingSectionStore = require('../stores/SettingSectionStore');
var SettingAPI = require('utils/SettingAPI');
var SettingActions = require('actions/SettingActions');


var SettingSection = React.createClass(_.assign(Base(SettingSectionStore), {
  content: function () {
    var setting = this.state.setting;
    var crid = '{crid}';
    var link = '{link}';

    return (
      <div>
        <div></div></div>

import React, { PureComponent } from 'react';
import FRC from 'formsy-react-components';
import ReactTagInput from 'react-tag-input';
import PropTypes from 'prop-types';

const ReactTags = ReactTagInput.WithContext;

const Input = FRC.Input;

class Tags extends PureComponent {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleAddition = this.handleAddition.bind(this);

    const tags = props.value ? props.value.map(optionId => {
      return {
        id: optionId,
        text: _.findWhere(props.options, {value: optionId}).label
      };
    }) : [];

import React, { PropTypes, Component } from 'react';
import FRC from 'formsy-react-components';
import ReactTagInput from 'react-tag-input';

const ReactTags = ReactTagInput.WithContext;

const Input = FRC.Input;

class Tags extends Component {

  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleAddition = this.handleAddition.bind(this);

    const tags = props.value ? props.value.map(optionId => {
      return {
        id: optionId,
        text: _.findWhere(props.options, {value: optionId}).label
      };
    }) : [];