Server Action with manual validation

textarea.jsx

'use client';

import { useState } from 'react';
import { actionFeedback } from './_action';

function Textarea() {
  const [error, setError] = useState<string>('');

  const clientAction = async (formData: FormData) => {
    const { error, feedbackData } = await actionFeedback(formData);

    if (error) {
      setError(error);
    } else {
      setError('');
      console.log(feedbackData);
    }
  };
  
  return (
    <form action={clientAction}>
      <textarea name="feedback"></textarea>
      <button type="submit">submit</button>     
    </form>
  )
}

export default Textarea

We need to turn the type feedbackData and the error in our function

_action.ts

'use server';

type FeedBackData = {
  feedbackData?: string;
  error?: string;
};

export async function actionFeedback(formData: FormData): Promise<Feed> {
  let feedback = formData.get('feedback') as string;

  if (!feedback || feedback.length <= 100) {
    return { error: 'Feed back must be 100 characters long' };
  }

  return { feedbackData: feedback };
}

edoves/server_action_manual_validation.md

Server Action with manual validation