title: how to implement react tag input control with auto suggest code in JSX?
body: <p>I am trying to implement the Auto suggest input with taggedit control available from the following link</p>
  
  <p><a href="https://github.com/olahol/react-tagsinput#example" rel="nofollow">https://github.com/olahol/react-tagsinput#example</a></p>
  
  <p>i have tried my best and converted the code to Jsx format following below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>'use strict';
  
  /*LIBRARIES*/
  var React = require('react');
  var ReactDOM = require('react-dom');
  var TagsInput = require('react-tagsinput');
  var TagCss = require('react-tagsinput/react-tagsinput.css')
      //var CustomScroll = require('react-custom-scroll');
      //var CustomScrollCSS = require('react-custom-scroll/src/main/customScroll.css');
  var ReactAutoSuggest = require('react-autosuggest');
  var ReactAutoSize = require('react-input-autosize');
  
  var TaggedInput = React.createClass({
              getInitialState: function() {
                  return ({
                      tags: []
                  });
              },
              handleChange(tags) {
  
                  this.setState({
                      tags
                  });
              },
              states: function() {
                  return ([{
                      abbr: "AL",
                      name: "Alabama"
                  }, {
                      abbr: "AK",
                      name: "Alaska"
                  }, {
                      abbr: "AZ",
                      name: "Arizona"
                  }]);
              },
              render: function() {
  
                  const autocompleteRenderInput = (props) =&gt; {
                      const addTag = props;
                      const handleOnChange = (e, method) =&gt; {
                          if (method === 'enter') {
                              e.preventDefault();
                          } else {
                              props.onChange(e);
                          }
                      }
  
                      console.log(this.states());
  
                      const inputValue = (props.value &amp;&amp; props.value.trim().toLowerCase()) || ""
                      const inputLength = inputValue.length
  
                      var tags = this.state;
                      var suggestions = this.states().filter((state) =&gt; {
                          return state.name.toLowerCase().slice(0, inputLength) === inputValue
                      });
  
                      var onSuggestionSelected = function(event, suggestion) {
                          props.addTag(suggestion.name);
                      }
                      var shouldRenderSuggestions = function(value) {
                          return value.trim().length &gt; 2;
                      }
                      var getSuggestionValue = function(suggestion) {
                          return suggestion.name;
                      }
  
                      var renderSuggestion = function(suggestion) {
                          return &lt;span &gt; {
                              suggestion.name
                          } &lt; /span&gt;;
                      }
                      const inputProps = {
                          value, // usually comes from the application state
                          handleOnChange, // called every time the input value changes
                          onBlur, // called when the input field loses focus, e.g. when user presses Tab
                          type: 'search',
                          placeholder: 'Enter city or postcode'
                      };
                      return ( &lt;
                          ReactAutoSuggest ref = {
                              props.ref
                          }
                          suggestions = {
                              suggestions
                          }
                          shouldRenderSuggestions = {
                              shouldRenderSuggestions
                          }
                          getSuggestionValue = {
                              getSuggestionValue
                          }
                          renderSuggestion = {
                              renderSuggestion
                          }
                          inputProps = {
                              inputProps
                          } &gt; &lt; /ReactAutoSuggest&gt;)
                      }
  
                      return ( &lt; TagsInput renderInput = {
                              autocompleteRenderInput
                          }
                          value = {
                              this.state.tags
                          }
                          onChange = {
                              this.handleChange
                          }
                          /&gt;);
  
  
                      }
                  });
  
              ReactDOM.render( &lt; TaggedInput / &gt; , document.getElementById('divSharedLeadContainer'));</code></pre>
  </div>
  </div>
  </p>
  
  <p>and  not able to bring the output.</p>
  
  <p>It would be very helpful someone can give the samples in JSX code.</p>