Building a Commit Phase in a React Form

This challenge focuses on implementing the "commit" phase of a form in a React application. Often, after a user fills out a form, you need to gather all the data, perform final validations, and then send it to an API or perform some other action. This challenge asks you to build a reusable component that handles this commit process, including displaying loading states and error messages.

Problem Description

You are tasked with creating a CommitButton component that encapsulates the logic for committing form data. This component will be used within a larger form component. The CommitButton should:

1. Accept a commitFunction prop: This function is responsible for handling the actual submission of the form data. It should accept the form data as an argument.
2. Accept a loading prop: A boolean value indicating whether the commit process is currently in progress.
3. Accept a errorMessage prop: A string containing an error message to display if the commit fails.
4. Disable itself when loading is true: Prevent multiple submissions while the commit is in progress.
5. Display appropriate states:
   • When loading is false and errorMessage is empty, display a standard "Commit" button.
   • When loading is true, display a loading indicator (e.g., a spinner).
   • When loading is false and errorMessage is not empty, display the error message.
6. Call the commitFunction when clicked: When the button is clicked (and not disabled), call the provided commitFunction with the form data (assume the form data is available globally or passed as a prop to the parent component). For simplicity, you don't need to manage the form data itself within this component.

Examples

Example 1:

Input: commitFunction: (data: any) => console.log("Commiting:", data), loading: false, errorMessage: ""
Output: <button>Commit</button>
Explanation: The button displays the default "Commit" text.

Example 2:

Input: commitFunction: (data: any) => console.log("Commiting:", data), loading: true, errorMessage: ""
Output: <div className="loading">Loading...</div>
Explanation: A loading indicator is displayed.

Example 3:

Input: commitFunction: (data: any) => console.log("Commiting:", data), loading: false, errorMessage: "Submission failed. Please try again."
Output: <div className="error">Submission failed. Please try again.</div>
Explanation: An error message is displayed.

Constraints

• The component should be written in TypeScript.
• The CommitButton component should be reusable and not tightly coupled to any specific form.
• The commitFunction is assumed to be asynchronous and may throw an error.
• You are free to use any styling approach (CSS, styled-components, etc.). Focus on the logic.
• Assume the parent component will manage the form data and pass it to the commitFunction.

Notes

• Consider using React's useState hook to manage the local state of the component (e.g., to track loading and error states if they aren't managed externally).
• Think about how to handle potential errors thrown by the commitFunction.
• The loading indicator and error message styling are left to your discretion. Focus on the core logic of displaying the correct state based on the props.
• This component is designed to be a building block. It doesn't handle form validation itself; it assumes the data is already validated before being passed to the commitFunction.