How It Works

Lifecycle

ReactForm manages the complete CRUD lifecycle automatically based on the mode (create or update). Understanding this flow helps you configure the library correctly.

Modes

<ReactForm> operates in one of two modes: Create or Update. The mode is automatically determined based on whether an item ID is present.

1. Create Mode

When you're creating a new item and don't have an existing ID.

• No initial data is fetched from the API
• Form fields are populated with default values from given schema to the form
• The <ReactFormCreate> button is visible
• Clicking the button calls your create method to save the new item

2. Update Mode

When you're editing an existing item and have a unique ID from the database.

• The read method is called with the item ID to fetch existing data
• Form fields are pre-filled with the retrieved data
• The <ReactFormUpdate> button is visible
• Clicking the button calls your update method to save changes

To configure the mode detection, use the isNewItemCheck option. Read more

On Mount & Read

When <ReactForm> mounts, the following sequence occurs:

1. Mode Detection: ReactForm calls isNewItemCheck with the itemId prop to determine the operation mode.
2. Create Mode: when isNewItemCheck returns true
   • No API call is made
   • Default field values are applied from given schema to the form
3. Update Mode: when isNewItemCheck returns false
   • The read function is called with itemId as the argument
   • You fetch the existing data from the API and return it
   • Populates form fields with the retrieved data

Create

The <ReactFormCreate> renders a create button. The button is only visible in create mode.

When clicked:

• ReactForm calls the create method from props
• The create method performs the API call and returns the result
• On success: Form state updates with the new response data
• On failure: The errorAdapter is called to format and display errors

Update

The <ReactFormUpdate> renders an update button. The button is only visible in update mode.

When clicked:

• ReactForm calls the update method from props
• The update method performs the API call and returns the result
• On success: Form state updates with the new response data
• On failure: The errorAdapter is called to format and display errors