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 handleSubmit = (event) => {
                event.preventDefault(); // Prevent the default form submission behavior

const formData = new FormData(event.target);
                const jsonData = {};
                formData.forEach((value, key) => {
                    jsonData[key] = value;
                });

fetch('https://example.com/api', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(jsonData)
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data); // Handle the API response
                    })
                    .catch(error => {
                        console.error('Error:', error); // Handle any errors
                    });
            };

return (
                <div className='container'>
                    <h3>React Js Post Form Data to API</h3>
                    <form onSubmit={handleSubmit}>
                        <input type="text" name="email" placeholder="Email" />
                        <input type="text" name="password" placeholder="Password" />
                        <input type="text" name="firstName" placeholder="First Name" />
                        <input type="text" name="lastName" placeholder="Last Name" />
                        <button type="submit">Submit</button>
                    </form>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

form {
            display: flex;
            flex-direction: column;
        }

input[type="text"] {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

button[type="submit"] {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #4caf50;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

button[type="submit"]:hover {
            background-color: #45a049;
        }

/* Optional: Add some spacing between the input fields */
        input:not(:last-child) {
            margin-bottom: 15px;
        }
    </style>
</body>

</html>