FormReview.tsx

import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import { ReviewCard } from "./";

interface Props {
  formData: FormData;
  setForm: SetForm;
  navigation: NavigationProps;
}

export default function ({ setForm, formData, navigation }: Props) {
  const {
    email,
    username,
    password,
    name,
    lastName,
    phone,
    address
  } = formData;

  const { go }: { go?: any } = navigation;

  const sendData = () => {
    // Here you can make you request
    console.log({
      data: {
        email,
        username,
        password,
        name,
        lastName,
        phone,
        address
      }
    });
  };

  return (
    <>
      <h2 className="Title">Register Review</h2>

      <ReviewCard
        title="Auth Info"
        values={[
          { field: "Email", value: email },
          { field: "Username", value: username },
          { field: "Password", value: password }
        ]}
        editButtonClick={() => go(0)}
      />
      <ReviewCard
        title="Basic Info"
        values={[
          { field: "Name", value: name },
          { field: "Nast Name", value: lastName }
        ]}
        editButtonClick={() => go(1)}
      />
      <ReviewCard
        title="Contact Info"
        values={[
          { field: "Phone", value: phone },
          { field: "Address", value: address }
        ]}
        editButtonClick={() => go(2)}
      />

      <button onClick={sendData} className="sendData">
        Send Data
      </button>
    </>
  );
}