On my site, I'm using TagsInput, which allows the user to enter data into an input field, hit the enter button, and see it displayed as tags.

But I have one problem: the user can enter data with the same value as many times as he wants. I would like to restrict this ability and not allow the same data to be entered.

I already have some validation that displays a message if the user has entered an invalid data format.

Thus, I would like to add the ability to not accept data if it is already in the tags and display the corresponding message.

export default function TagsInputRequestURL(props) {
    const {tags, setTags} = props;
    const [input, setInput] = useState("");
    const [isValid, setIsValid] = useState(true);
  
    const onChange = (e) => {
      const { value } = e.target;
      if (e.target.value) {
        setIsValid(() => /^(ftp|https?):\/\/[^ "] $/.test(e.target.value));
      } else {
        setIsValid(true);
      }
      setInput(value);
    };
  
    const onSubmit = (e) => {
      e.preventDefault();
      if (isValid) {
        setTags((tags) => [...tags, input]);
        setInput("");
      }
    };
  
    const deleteTag = (index) => {
      setTags((prevState) => prevState.filter((tag, i) => i !== index));
    };
  
    return (
      <div className={classes.container}>
        {tags.map((tag, index) => 
          <div className={classes.tag}>
            <ClearIcon
              className={classes.del}
              fontSize="big"
              onClick={() => deleteTag(index)}
            />
            {tag}
          </div>
        )}
        <form   onSubmit={onSubmit}>
          <input
            className={classes.input}
            value={input}
            placeholder={props.inputPlaceholder}
            onChange={onChange}
          />
          {!isValid && <small style={{ color: "red" }}>Invalid URL</small>}
        </form>
      </div>
    );
  }

CodePudding user response：

export default function TagsInputRequestURL(props) {
    const {tags, setTags} = props;
    const [input, setInput] = useState("");
    const [isValid, setIsValid] = useState(true);
  
    const onChange = (e) => {
      const { value } = e.target;
      if (e.target.value) {
        setIsValid(() => /^(ftp|https?):\/\/[^ "] $/.test(e.target.value));
      } else {
        setIsValid(true);
      }
      setInput(value);
    };

    const containsString = (str) => {
        if(!str || str === '') return false
        const strLower = str.toLowerCase();
        let isExist = false
        for(let i=0; i<tags.length; i  ){
            let itemLower = tags[i].toLowerCase();
            if(strLower === itemLower){
                isExist = true;
                break;
            }
        }
        return isExist;
    }
  
    const onSubmit = (e) => {
      e.preventDefault();
      if (isValid && !containsString(input)) {
        setTags((tags) => [...tags, input]);
        setInput("");
      }
      else{
        console.log("You already hame same value in the 'tags' array. Try with different string.")
      }
    };
  
    const deleteTag = (index) => {
      setTags((prevState) => prevState.filter((tag, i) => i !== index));
    };
  
    return (
      <div className={classes.container}>
        {tags.map((tag, index) => 
          <div className={classes.tag}>
            <ClearIcon
              className={classes.del}
              fontSize="big"
              onClick={() => deleteTag(index)}
            />
            {tag}
          </div>
        )}
        <form onSubmit={onSubmit}>
          <input
            className={classes.input}
            value={input}
            placeholder={props.inputPlaceholder}
            onChange={onChange}
          />
          {!isValid && <small style={{ color: "red" }}>Invalid URL</small>}
        </form>
      </div>
    );
  }