/Javascript/React/React tagInput component

React tagInput component

const TagInput = ({ tags }) => {
  const [tagData, setTagData] = React.useState(tags);
  const removeTagData = indexToRemove => {
    setTagData([...tagData.filter((_, index) => index !== indexToRemove)]);
  };
  const addTagData = event => {
    if (event.target.value !== '') {
      setTagData([...tagData, event.target.value]);
      event.target.value = '';
    }
  };
  return (
    <div className="tag-input">
      <ul className="tags">
        {tagData.map((tag, index) => (
          <li key={index} className="tag">
            <span className="tag-title">{tag}</span>
            <span
              className="tag-close-icon"
              onClick={() => removeTagData(index)}
            >
              x
            </span>
          </li>
        ))}
      </ul>
      <input
        type="text"
        onKeyUp={event => (event.key === 'Enter' ? addTagData(event) : null)}
        placeholder="Press enter to add a tag"
      />
    </div>
  );
};

Source: 30secondsofcode.org

Similar codes

0 vote385 views1 answer
Scrollbar automatically scroll down as new divs are added reactjs
Javascript React
85 votes406 views6 answers
Redirect react js
Javascript React
27 votes342 views6 answers
React usestate
Javascript React
1 vote363 views1 answer
Arrow not showing react slick
Javascript React
0 vote379 views1 answer
React native panresponder on click
Javascript React
0 vote385 views2 answers
Get selected value on componentdidmount reactjs
Javascript React
2 votes410 views1 answer
Dynamic import in reactjs
Javascript React
2 votes355 views2 answers
Merge two styles react native
Javascript React
17 votes404 views4 answers
React native geolocation
Javascript React
0 vote337 views1 answer
React-i18next
Javascript React