<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [arrayState, setArrayState] = useState(['Apple', 'Banana', 'Grapes']);
const [inputValue, setInputValue] = useState('');
const addElementIfNotExists = () => {
// Check if the inputValue is not empty
if (inputValue.trim() !== '') {
// Convert the inputValue and all elements in the array to lowercase
const lowercaseInputValue = inputValue.toLowerCase();
const lowercaseArray = arrayState.map(element => element.toLowerCase());
// Check if the lowercaseInputValue exists in the lowercaseArray
if (lowercaseArray.includes(lowercaseInputValue)) {
// If it already exists, show an alert
alert(`Element "${inputValue}" already exists in the array.`);
// If it doesn't exist, add it to a new copy of the array
const newArray = [...arrayState, inputValue];
// Update the state with the new array
// Clear the input field after adding the element
<div className='container'>
<h1 className='title'>Check if an Element exists in an Array in React</h1>
{arrayState.map((element, index) => (
<li key={index} className='list-item'>{element}</li>
onChange={(e) => setInputValue(e.target.value)}
placeholder="Enter an element"
<button className='add-button' onClick={addElementIfNotExists}>Add Element</button>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #007bff;
background-color: #0056b3;