[Material-UI] Migrating from react-autosuggest

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: Autowhatever

[
    { _id: "5c1b6690468fa31f86286825", name: "Afghanistan", __v: 0, eu: false },
    ...
    { _id: "5c1b6690468fa31f86286918", name: "Zimbabwe", __v: 0, eu: false }
]

import React, { useState } from 'react';
import * as PropTypes from 'prop-types';
import deburr from 'lodash/deburr';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import styles from './styles';

const renderSuggestion = (suggestion, { query, isHighlighted }) => {
  const matches = match(suggestion.name, query);
  const parts = parse(suggestion.name, matches);

  return (
    <MenuItem selected={isHighlighted} component="div">
      <div>
        {parts.map((part, index) => (part.highlight ? (
          <span key={String(index)} style={{ fontWeight: 500 }}>
              {part.text}
            </span>
        ) : (
          <strong key={String(index)} style={{ fontWeight: 300 }}>
            {part.text}
          </strong>
        )))}
      </div>
    </MenuItem>
  );
};

const getSuggestions = (suggestions, value) => {
  const inputValue = deburr(value.trim()).toLowerCase();
  const inputLength = inputValue.length;
  let count = 0;

  return inputLength === 0
    ? []
    : suggestions.filter((suggestion) => {
      const keep = count < 5 && suggestion.name.slice(0, inputLength).toLowerCase() === inputValue;

      if (keep) {
        count += 1;
      }

      return keep;
    });
};

const renderInputComponent = (inputProps) => {
  const {
    classes, inputRef = () => {
    }, ref, ...other
  } = inputProps;

  return (
    <TextField
      fullWidth
      InputProps={{
        inputRef: (node) => {
          ref(node);
          inputRef(node);
        },
        classes: {
          input: classes.input,
        },
      }}
      {...other}
    />
  );
};

const getSuggestionValue = suggestion => suggestion.name;

const AutosuggestInput = ({ inputValue, label, margin, formInput, handler, inputSuggestions, returnId }) => {
  const classes = styles();

  const [suggestions, setSuggestions] = useState([]);
  const [value, setValue] = useState(inputValue);

  const handleSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(inputSuggestions, value))
  };

  const handleSuggestionsClearRequested = () => {
    setSuggestions([])
  };

  const handleChange = () => (event, { newValue }) => {
    const suggestion = suggestions.filter(sug => sug.name === newValue);

    !suggestion.length && handler(formInput, '');

    setValue(newValue);
  };

  const onSuggestionSelected = (event, { suggestion }) => {
    handler(formInput, suggestion._id);
  };

  const autosuggestProps = {
    suggestions,
    renderInputComponent: renderInputComponent,
    onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
    onSuggestionsClearRequested: handleSuggestionsClearRequested,
    getSuggestionValue: getSuggestionValue,
    renderSuggestion: renderSuggestion,
    onSuggestionSelected: onSuggestionSelected,
  };

  return (
    <div className={classes.root}>
      <Autosuggest
        {...autosuggestProps}
        inputProps={{
          classes,
          placeholder: label,
          value,
          onChange: handleChange(),
          autoComplete: 'no',
          margin,
        }}
        theme={{
          container: classes.container,
          suggestionsContainerOpen: classes.suggestionsContainerOpen,
          suggestionsList: classes.suggestionsList,
          suggestion: classes.suggestion,
        }}
        renderSuggestionsContainer={options => (
          <Paper {...options.containerProps} square>
            {options.children}
          </Paper>
        )}
      />
    </div>
  )
};

AutosuggestInput.propsTypes = {
  inputValue: PropTypes.string,
  label: PropTypes.string,
  margin: PropTypes.string,
  formInput: PropTypes.string.isRequired,
  handler: PropTypes.func.isRequired,
  inputSuggestions: PropTypes.array.isRequired,
  returnId: PropTypes.bool,
};

AutosuggestInput.defaultProps = {
  inputValue: '',
  label: '',
  margin: 'normal',
  returnId: false,
};

export default AutosuggestInput;

import React from 'react';
import * as PropTypes from 'prop-types';

import { TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';

const AutocompleteInput = ({ input, options, value, label, margin, required, returnId, handler }) => (
  <Autocomplete
    options={options}
    getOptionLabel={option => (typeof option === 'string' && returnId ? options.find(c => c._id === option) : option)?.name}
    value={value}
    onChange={(event, newValue) => {
      handler(input, returnId ? newValue?._id : newValue)
    }}
    renderInput={params => <TextField {...params} label={label} margin={margin} required={required} />}
  />
);

AutocompleteInput.propTypes = {
  input: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired,
  value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  label: PropTypes.string.isRequired,
  margin: PropTypes.string,
  required: PropTypes.bool,
  returnId: PropTypes.bool,
  handler: PropTypes.func.isRequired,
};

AutocompleteInput.defaultProps = {
  margin: 'normal',
  required: false,
  returnId: false,
  value: null,
};

export default AutocompleteInput;