React Tags Input Component

Common errors

• Error: TagsInput requires a onChange prop

  cause The `onChange` prop, essential for updating the list of tags, was not provided to the `TagsInput` component.
  fix Ensure `TagsInput` receives an `onChange` prop, a function that updates the component's state with the new array of tags.

• Warning: Failed prop type: The prop `value` is marked as required in `TagsInput`, but its value is `undefined`.

  cause The `value` prop, which is an array of tags, was not provided or was `undefined`.
  fix Pass an array (even an empty one) to the `value` prop of the `TagsInput` component.

• Tags are not visually appearing or styling incorrectly.

  cause The default stylesheet for `react-tagsinput` was not imported, or custom styles are overriding it unexpectedly.
  fix Add `import 'react-tagsinput/react-tagsinput.css';` to your main application file or the component where `TagsInput` is used. Inspect browser developer tools to check for conflicting styles.

• Input field does not update when typing, even though `inputValue` is set.

  cause When `inputValue` is used to control the input, the `onChangeInput` prop is also required to handle input changes. If missing, the input remains static.
  fix Provide an `onChangeInput` function to the `TagsInput` component alongside `inputValue`. This function should update the state that `inputValue` reads from.

• Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

  cause This error often occurs in class components when event handlers (like `onChange`) lose their `this` context. The `this` keyword inside `handleChange` might not refer to the component instance.
  fix Ensure `handleChange` is an arrow function or is explicitly bound in the constructor (`this.handleChange = this.handleChange.bind(this);`) to maintain the correct `this` context.

Warnings

• breaking Version 3.0.0 and above of `react-tagsinput` requires React 16.8 or newer due to internal updates using modern React APIs. Prior versions of React will not be compatible.
  Fix: Upgrade your React installation to version 16.8 or newer. If upgrading React is not an option, you must use a `react-tagsinput` version prior to 3.0.0 (e.g., `^2.x.x`).
• breaking The `renderInput` prop's signature changed in v3.0.0. It now receives only a `props` object, rather than `(props, getInputProps)`. Custom implementations will need to be updated.
  Fix: Refactor custom `renderInput` functions to accept a single `props` argument: `(props) => { /* ... */ }`.
• breaking The `renderTag` prop's signature was updated in v3.0.0 to use a destructured object `{ tag, key, onRemove, getTagProps }`. Existing custom `renderTag` implementations will break.
  Fix: Refactor custom `renderTag` functions to accept the new destructured object signature: `({ tag, key, onRemove, getTagProps }) => { /* ... */ }`.
• breaking `react-autocomplete` was removed as a dependency in v2.0.0, meaning built-in autocompletion functionality is no longer available. Users upgrading from v1.x.x must implement autocompletion externally.
  Fix: Implement custom autocompletion logic using a separate component, or integrate a third-party autocomplete library, as `react-tagsinput` no longer provides this feature.
• gotcha The component does not include its default styling automatically. You must explicitly import the provided CSS file (`react-tagsinput/react-tagsinput.css`) for the component to render with basic styles.
  Fix: Add `import 'react-tagsinput/react-tagsinput.css';` to your application's entry point or relevant component file. Alternatively, provide your own custom CSS classes.
• gotcha To implement a controlled input field within `TagsInput` using `inputValue`, you must also provide an `onChangeInput` handler. If `onChangeInput` is missing, the input field will not allow user interaction.
  Fix: Ensure that whenever `inputValue` is set, an `onChangeInput` prop is also provided to update the input's value, adhering to React's controlled component pattern.
• gotcha By default, the `onlyUnique` prop is `false`, allowing duplicate tags to be added. If your application requires unique tags, this prop must be explicitly set to `true`.
  Fix: Set the `onlyUnique={true}` prop on the `TagsInput` component to prevent the addition of duplicate tags.

Install

• npm install react-tagsinput npm
• yarn add react-tagsinput yarn
• pnpm add react-tagsinput pnpm

Imports

• TagsInput
  wrong:

  import { TagsInput } from 'react-tagsinput'

  correct:

  import TagsInput from 'react-tagsinput'

  TagsInput is a default export, not a named export.
• CSS Stylesheet

  import 'react-tagsinput/react-tagsinput.css'

  The component does not bundle its styles; explicit import of the stylesheet is required for basic styling.
• CommonJS require

  const TagsInput = require('react-tagsinput')

  While primarily an ESM library, it still provides a CommonJS build for Node.js environments. Ensure your bundler handles it correctly.

Quickstart

Demonstrates basic usage of `react-tagsinput` with functional components, state management using `useState`, and essential styling.

import React from 'react';
import TagsInput from 'react-tagsinput';

import 'react-tagsinput/react-tagsinput.css'; // Don't forget to import the styles!

function App() {
  const [tags, setTags] = React.useState(['react', 'javascript']);

  const handleChange = (newTags) => {
    setTags(newTags);
  };

  return (
    <div>
      <h1>My Tag Editor</h1>
      <p>Add some tags related to your project:</p>
      <TagsInput
        value={tags}
        onChange={handleChange}
        maxTags={10}
        addOnBlur={true}
        onlyUnique={true}
        inputProps={{ placeholder: 'Add a new tag' }}
        tagProps={{
          className: 'react-tagsinput-tag',
          classNameRemove: 'react-tagsinput-remove'
        }}
      />
      <p>Current tags: {tags.join(', ')}</p>
    </div>
  );
}