Parent Component

Parent.svelte

<!-- Parent.svelte -->

<!-- Script Section -->
<script>
  // Import necessary modules
  import axios from 'axios'; // Import axios for making HTTP requests
  import Child from './Child.svelte'; // Import the Child component

  // Function to handle form submission
  const handleSubmit = async (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    // Extract form data from the event detail
    const { detail } = event;
    const { username, email, password } = detail;
    try {
      // Make a POST request to the signup API endpoint
      const response = await axios.post('https://example.com/api/signup', {
        username,
        email,
        password
      });
      // Log success message with response data
      console.log('Signup successful:', response.data);
    } catch (error) {
      // Log error message if signup fails
      console.error('Error signing up:', error.message);
    }
  };
</script>

<!-- Heading for the signup form -->
<h1>Signup Form</h1>

<!-- Render the Child component with 'on:submit' event handler -->
<Child on:submit={handleSubmit} />