<ReactFormError>

Renders form-level errors. By default, it renders nothing, but you can customize it using render props to display errors in your UI.

<ReactForm>
  {({ context }) => (
    <>
      <ReactFormError>
        {({ error }) => (
          error && (
            <div className="error-message">
              <h3>{error.name}</h3>
              <p>{error.message}</p>
            </div>
          )
        )}
      </ReactFormError>
      {/* Other components */}
    </>
  )}
</ReactForm>

Render Props

error

• Type: Object|null

The form-level error object formatted by errorAdapter. Contains:

• name: Error name/type
• message: Error message
• fieldErrors: Object containing field-specific errors

{
  name: "ValidationError",
  message: "Please check the form for errors",
  fieldErrors: {
    email: "Invalid email address",
    name: "Name is required"
  }
}

Default Behavior

If no render prop is provided, <ReactFormError> renders nothing by default. You must provide a render prop to display errors.

// Renders nothing
<ReactFormError />

// Custom error display
<ReactFormError>
  {({ error }) => (
    error && (
      <div className="alert alert-error">
        <strong>{error.name}:</strong> {error.message}
      </div>
    )
  )}
</ReactFormError>

Example

<ReactForm schema={schema} create={create} update={update}>
  {({ context }) => (
    <>
      <ReactFormError>
        {({ error }) => {
          if (!error) return null;
          
          return (
            <div className="error-banner">
              <h4>{error.name}</h4>
              <p>{error.message}</p>
              {Object.keys(error.fieldErrors || {}).length > 0 && (
                <ul>
                  {Object.entries(error.fieldErrors).map(([field, message]) => (
                    <li key={field}>
                      <strong>{field}:</strong> {message}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          );
        }}
      </ReactFormError>
      
      <ReactFormFields>
        {/* Fields */}
      </ReactFormFields>
      
      <ReactFormCreate />
      <ReactFormUpdate />
    </>
  )}
</ReactForm>