ReviewCard.tsx

import React from "react";

interface Props {
  title: string;
  values: Array<{ field: string; value: string }>;
  editButtonClick: () => void;
}

export default function ({ title, values, editButtonClick }: Props) {
  return (
    <div className="ReviewCard">
      <div className="ReviewTitle">
        <h3 className="">{title}</h3>
        <button onClick={editButtonClick}>Edit</button>
      </div>

      <ul className="ReviewList">
        {values.map(({ field, value }) => (
          <li key={field}>
            <span>{field}:</span> <span>{value}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

StepButton.tsx

import React from "react";
import { NavigationProps } from "react-hooks-helper";

interface Props {
  navigation: NavigationProps;
  withPrevious?: boolean;
}

export default function ({ navigation, withPrevious = false }: Props) {
  const { next, previous } = navigation;

  return (
    <>
      <div className="StepButtonBox">
        {withPrevious && (
          <button onClick={previous} className="StepButton secondary">
            Prev
          </button>
        )}
        <button onClick={next} className="StepButton primary">
          Next
        </button>
      </div>
    </>
  );
}

TextField.tsx

import React from "react";
import { SetForm } from "react-hooks-helper";

interface Props {
  name: string;
  value: string;
  labelText: string;
  placeholder: string;
  id: string;
  type: "text" | "password" | "email" | "tel";
  onChange: SetForm;
}

export default function ({
  name,
  value,
  labelText,
  id,
  type,
  placeholder,
  onChange
}: Props) {
  return (
    <div className="TextField">
      <label htmlFor={id}>{labelText}</label>
      <input
        type={type}
        id={id}
        name={name}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e)}
      />
    </div>
  );
}