React Js Add Element or Items to Array by using Input Field

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Array Values</title>
</head>
<body>
    <h1>Add Element Javascript</h1>
    <input type="text" id="myInput" class="inputField" placeholder="Type something...">
    <button onclick="addToMyArray()" class="arrayButton">Add to Array</button>
    <div id="output" class="outputContainer"></div>
    <script>
        // Initialize an empty array
        let myArray = [];

function addToMyArray() {
            // Get the input element value
            let inputValue = document.getElementById('myInput').value;

// Check if the input is not empty
            if (inputValue.trim() !== '') {
                // Add the value to the array
                myArray.push(inputValue);

// Update the output div with array content
                updateOutput();
            } else {
                alert("Please enter a value before adding to the array.");
            }
        }

function updateOutput() {
            // Get the output div element
            let outputDiv = document.getElementById('output');

// Clear previous content
            outputDiv.innerHTML = '';

// Display array content
            for (let i = 0; i < myArray.length; i++) {
                outputDiv.innerHTML += `<p>${myArray[i]}</p>`;
            }
        }
    </script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

margin: 0;

}

.inputField {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

.arrayButton {
            padding: 10px;
            margin: 5px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

.arrayButton:hover {
            background-color: #45a049;
        }

.outputContainer {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</body>

</html>

​x
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Array Values</title>
</head>
<body>
    <h1>Add Element Javascript</h1>
    <input type="text" id="myInput" class="inputField" placeholder="Type something...">
    <button onclick="addToMyArray()" class="arrayButton">Add to Array</button>
    <div id="output" class="outputContainer"></div>
    <script>
        // Initialize an empty array
        let myArray = [];
​
        function addToMyArray() {
            // Get the input element value
            let inputValue = document.getElementById('myInput').value;
​
            // Check if the input is not empty
            if (inputValue.trim() !== '') {
                // Add the value to the array
                myArray.push(inputValue);
​
                // Update the output div with array content
                updateOutput();
            } else {
                alert("Please enter a value before adding to the array.");
            }
        }
​
        function updateOutput() {
            // Get the output div element
            let outputDiv = document.getElementById('output');
​
            // Clear previous content
            outputDiv.innerHTML = '';
​
            // Display array content
            for (let i = 0; i < myArray.length; i++) {
                outputDiv.innerHTML += `<p>${myArray[i]}</p>`;
            }
        }
    </script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
​
            margin: 0;
​
        }
​
        .inputField {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
​
        .arrayButton {
            padding: 10px;
            margin: 5px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
​
        .arrayButton:hover {
            background-color: #45a049;
        }
​
        .outputContainer {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</body>
​
</html>