<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
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>
<style>
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
button[type="submit"] {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:disabled {
background-color: #ccc;
cursor: not-allowed;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px 0;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
</style>
</body>
</html>