React Js Send/Post Form Data to APi

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState, useEffect } = React;
        function App() {
            const [formData, setFormData] = useState({
                name: '',
                email: '',
                // Add more fields as needed
            });

// Update the form data when input fields change
            const handleInputChange = (event) => {
                setFormData({ ...formData, [event.target.name]: event.target.value });
            };

// Handle form submission
            const handleSubmit = (event) => {
                event.preventDefault();
                // Call the API using Axios
                axios.post('https://example.com/api', formData)
                    .then((response) => {
                        // Handle the API response
                        console.log(response);
                    })
                    .catch((error) => {
                        // Handle any errors
                        console.error(error);
                    });
            };

return (
                <div className='container'>
                    <h3>React Js Post Form Data to API</h3>
                    <form onSubmit={handleSubmit}>
                        <label>
                            Name:
                            <input
                                type="text"
                                name="name"
                                value={formData.name}
                                onChange={handleInputChange}
                            />
                        </label>
                        <br />
                        <label>
                            Email:
                            <input
                                type="email"
                                name="email"
                                value={formData.email}
                                onChange={handleInputChange}
                            />
                        </label>
                        <br />
                        <button type="submit">Submit</button>
                    </form>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f7f7f7;
        }

.container h3 {
            text-align: center;
            margin-bottom: 20px;
        }

.container form label {
            display: block;
            margin-bottom: 10px;
        }

.container form input[type="text"],
        .container form input[type="email"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

.container form button[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #4caf50;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

.container form button[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</body>

</html>