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

       function App() {

            const { useState } = React;

            const [items, setItems] = useState(['Apple', 'Mango']); // State to hold the array of items

            const [inputValue, setInputValue] = useState(''); // State to hold the input field value

​

            const handleInputChange = (event) => {

                setInputValue(event.target.value);

            };

​

            const handleAddItem = () => {

                if (inputValue.trim() !== '') {

                    setItems((prevItems) => [...prevItems, inputValue]);

                    setInputValue(''); // Clear the input field after adding the item

                }

            };

           return (

                <div className='container'>

                    <h3>React Js Add Element or Items to Array bu Input field</h3>

                    <div className='form'>

                        <input type="text" value={inputValue} onChange={handleInputChange} />

                        <button onClick={handleAddItem}>Add Item</button>

                    </div>

​

                    <ul>

                        {items.map((item, index) => (

                            <li key={index}>{item}</li>

                        ))}

                    </ul>

                </div>

​

            );

        }

​

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

    </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>