使用 redux 表单的 react-tag-autocomplete

Question

Im trying to use react-tag-autocomplete with redux form.

This is the documentation for react-tag-autocomplete React-tag-autocomplete

And below is react-tag-autocomplete with redux-form

I just wanted to know whether it's possible to display the id number along with the value (fruit name) in the list. See image below (red number refers to the id). I've gone through the documentation but i can't seem to find anything that deals with this. What i ultimately want to achieve is something like stackoverflow's tag system with id number and description.

Answer 1

You can use suggestionComponent prop to customise suggestion based on your needs.

Imp note - suggestionComponent is still in beta version. You have to update your library to version 6.

See Working copy of your code here (with version 6)

Code snippet

function SuggestionComponent({ item, query }) {
  return (
    <span id={item.id}>
      {item.name} - {item.id}
    </span>
  );
}
const TagAutocomplete = ({ input: { value, onChange } }) => {
  const suggestions = [
    { id: 1, name: "Apples" },
    { id: 2, name: "Pears" },
    { id: 3, name: "Bananas" },
    { id: 4, name: "Mangos" },
    { id: 5, name: "Lemons" },
    { id: 6, name: "Apricots" }
  ];
  const newValue = !value ? [] : value;

  const handleDelete = i => {
    const tags = [...newValue];
    tags.splice(i, 1);
    onChange(tags);
  };

  const handleAdd = e => {
    console.log("e", e);
    onChange([...newValue, e]);
  };

  return (
    <ReactTags
      suggestionComponent={SuggestionComponent}
      tags={newValue}
      suggestions={suggestions}
      handleDelete={handleDelete}
      handleAddition={handleAdd}
    />
  );
};