React Js Disable submit button if element found in array

      const { useState, useEffect, useRef } = React;

​

      function App() {

        const [inputValue, setInputValue] = useState("");

        const [todos, setTodos] = useState([

          { id: 1, title: "Font Awesome Icons" },

          { id: 2, title: "React" },

          { id: 3, title: "Vue" },

          { id: 4, title: "Javascript" },

        ]);

​

        const handleInputChange = (event) => {

          setInputValue(event.target.value);

        };

​

        const handleSubmit = (event) => {

          event.preventDefault();

​

          // Check if the input value already exists in the todos array (case-insensitive)

          const isDuplicate = todos.some(

            (todo) => todo.title.toLowerCase() === inputValue.toLowerCase()

          );

​

          if (isDuplicate) {

            // Input value already exists, do not submit the form

            return;

          }

​

          // Add the new todo to the todos array

          const newTodo = { id: todos.length + 1, title: inputValue };

          setTodos([...todos, newTodo]);

​

          // Clear the input field

          setInputValue("");

        };

​

        return (

          <div className="container">

            <h3>React Js Disable submit button if element found in array</h3>

            <form onSubmit={handleSubmit}>

              <input

                type="text"

                value={inputValue}

                onChange={handleInputChange}

              />

              <button

                type="submit"

                disabled={

                  !inputValue ||

                  todos.some(

                    (todo) =>

                      todo.title.toLowerCase() === inputValue.toLowerCase()

                  )

                }

              >

                Add Todo

              </button>

            </form>

            <ul>

              {todos.map((todo) => (

                <li key={todo.id}>{todo.title}</li>

              ))}

            </ul>

          </div>

        );

      }

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>