I have a page where there are two rich text editors and one form.
When a user clicks the submit button, I want to extract the data from the rich text editors and send it to a database.

I am having a hard time figuring out how best to do this. I have managed to come up with a solution using useState and useEffect, but it feels like a suboptimal solution.
How can I best handle state management in this situation?


Current code

const [context, setContext] = useState<string>('');
  const [question, setQuestion] = useState<string>('');
  const [answers, setAnswers] = useState<string>('');
  const [submitted, setSubmitted] = useState<boolean>(false);

  // Callback function for richtext editor 1
  const handleContextSubmit = (data: object) => {
    setContext(JSON.stringify(data));
  }
  // Callback function for richtext editor 2
  const handleQuestionSubmit = (data: object) => {
    setQuestion(JSON.stringify(data));
  }
  // Callback function for input form
  const handleAnswersSubmit = (data: object) => {
    setAnswers(JSON.stringify(data));
  }
  const handleSubmit = () => {
    setSubmitted(true);
  }

  useEffect(() => {
    // submit data to the server - using server actions?
    console.log(context);
    console.log(question);
    setSubmitted(false);
  }, [context, question, answers]);