Do not repeat tags

Question

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>
    );
  }

Answer 1

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>
    );
  }