React-Autosuggest and ES5

Question

Im totaly new to react and I do my project in ES5. I need to use React Autosuggest module, but it's example in ES6.

Can anyone translate it to ES5 please

function states () {
  return [
    {abbr: 'AL', name: 'Alabama'},
    {abbr: 'AK', name: 'Alaska'},
    {abbr: 'AZ', name: 'Arizona'},
    {abbr: 'AR', name: 'Arkansas'},
  ]
}

class AutocompleteExample extends React.Component {
  constructor () {
    super()
    this.state = {tags: []}
  }

  handleChange (tags) {
    this.setState({tags})
  }

  render () {
    function autocompleteRenderInput ({addTag, ...props}) {
      const handleOnChange = (e, {newValue, method}) => {
        if (method === 'enter') {
          e.preventDefault()
        } else {
          props.onChange(e)
        }
      }

      const inputValue = (props.value && props.value.trim().toLowerCase()) || ''
      const inputLength = inputValue.length

      let suggestions = states().filter((state) => {
        return state.name.toLowerCase().slice(0, inputLength) === inputValue
      })

      return (
        <Autosuggest
          ref={props.ref}
          suggestions={suggestions}
          shouldRenderSuggestions={(value) => value && value.trim().length > 0}
          getSuggestionValue={(suggestion) => suggestion.name}
          renderSuggestion={(suggestion) => <span>{suggestion.name}</span>}
          inputProps={{...props, onChange: handleOnChange}}
          onSuggestionSelected={(e, {suggestion}) => {
            addTag(suggestion.name)
          }}
          onSuggestionsClearRequested={() => {}}
          onSuggestionsFetchRequested={() => {}}
        />
      )
    }

    return <TagsInput renderInput={autocompleteRenderInput} value={this.state.tags} onChange={::this.handleChange} />
  }
}

Answer 1

There is no direct translation of a React component to ES5. React before ES6 had its own syntax with React.createClass and other things of the like.

It is deceptive because it uses the ES6 class syntax, but React has its own unique way of doing things. All the magic is inside extends Component. Everything you are confused about is probably the .jsx and things like what render is (it's a React thing).

Babel transpiles React components into something you would never, ever write yourself. Which is not what you're looking for (I think). If the class syntax is what's confusing you. Learn that independently, and then tackle ES6 within the context of React.

Answer 2

You can use babel to transpile your code. You can use babel repl to do this. Here is the transpiled version of the code

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function states() {
  return [{ abbr: 'AL', name: 'Alabama' }, { abbr: 'AK', name: 'Alaska' }, { abbr: 'AZ', name: 'Arizona' }, { abbr: 'AR', name: 'Arkansas' }];
}

var AutocompleteExample = function (_React$Component) {
  _inherits(AutocompleteExample, _React$Component);

  function AutocompleteExample() {
    _classCallCheck(this, AutocompleteExample);

    var _this = _possibleConstructorReturn(this, (AutocompleteExample.__proto__ || Object.getPrototypeOf(AutocompleteExample)).call(this));

    _this.state = { tags: [] };
    return _this;
  }

  _createClass(AutocompleteExample, [{
    key: 'handleChange',
    value: function handleChange(tags) {
      this.setState({ tags: tags });
    }
  }, {
    key: 'render',
    value: function render() {
      function autocompleteRenderInput(_ref) {
        var addTag = _ref.addTag,
            props = _objectWithoutProperties(_ref, ['addTag']);

        var handleOnChange = function handleOnChange(e, _ref2) {
          var newValue = _ref2.newValue,
              method = _ref2.method;

          if (method === 'enter') {
            e.preventDefault();
          } else {
            props.onChange(e);
          }
        };

        var inputValue = props.value && props.value.trim().toLowerCase() || '';
        var inputLength = inputValue.length;

        var suggestions = states().filter(function (state) {
          return state.name.toLowerCase().slice(0, inputLength) === inputValue;
        });

        return React.createElement(Autosuggest, {
          ref: props.ref,
          suggestions: suggestions,
          shouldRenderSuggestions: function shouldRenderSuggestions(value) {
            return value && value.trim().length > 0;
          },
          getSuggestionValue: function getSuggestionValue(suggestion) {
            return suggestion.name;
          },
          renderSuggestion: function renderSuggestion(suggestion) {
            return React.createElement(
              'span',
              null,
              suggestion.name
            );
          },
          inputProps: _extends({}, props, { onChange: handleOnChange }),
          onSuggestionSelected: function onSuggestionSelected(e, _ref3) {
            var suggestion = _ref3.suggestion;

            addTag(suggestion.name);
          },
          onSuggestionsClearRequested: function onSuggestionsClearRequested() {},
          onSuggestionsFetchRequested: function onSuggestionsFetchRequested() {}
        });
      }

      return React.createElement(TagsInput, { renderInput: autocompleteRenderInput, value: this.state.tags, onChange: this.handleChange });
    }
  }]);

  return AutocompleteExample;
}(React.Component);