field-error.tsx

Usage

The ‘name’ variable should be called after the input component its belonging to. In this case the FieldError will show all zod errors of the title input field.

<FieldError actionState={actionState} name="title" />

---

Implementation

src/components/form/field-error.tsx

import { ActionState } from "@/components/form/utils/to-action-state";
 
type FieldErrorProps = {
  actionState: ActionState;
  name: string;
};
 
const FieldError = ({ actionState, name }: FieldErrorProps) => {
  const message = actionState.fieldErrors[name]?.[0]; // First fieldError that is in the error array
 
  if (!message) return null;
 
  return <span className="text-xs text-red-500">{message}</span>;
};
 
export { FieldError };