Javascript – Submit a form, wait for the information to process, and then render (REACT)

I tried to do it like this …

I added a comment in "else" because TS complains. Some "any" are temporary.

I just want it to process the string received from the form before the result is shown on the screen. Every solution, even if it is completely different from mine, is valid.

import React, { useState } from 'react';
import { useSheetDataContext } from '../../context/SheetDataContext';
import { RouteComponentProps } from '@reach/router';

export function GoalMaker(_: RouteComponentProps) {
  const (formData, setFormData) = useState(());
  const (goal, setGoal) = useState(() => makeGoal(formData));
  const { sheetData } = useSheetDataContext();

  if (sheetData.length === 0) {
    return ;
  }

  function makeGoal(formData: any) {
    if (formData) {
      const goal: Goal() = ();
      const applicators = sheetData.map(applicator => applicator.NICK)
      applicators.map(applicator => {
        return applicatorLessons.forEach((_value, _index, array) => {
          if (array.length === 0) {
            // Aqui dentro vai ocorrer toda a lógica
            return goal;
      } else {
      // Eu travei aqui, porque preciso retornar algo.
    }

  return (
    <>
      

{goal.map((value: any) => `${value.name}: ${value.points} - ${value.type}`)}

setFormData(data)} /> ); }