react-final-form stepper (wizard form) using typescript form is not getting displayed

Question

I am integrating react-final-form wizard form (react stepper) with typescript this is what i have done till now.

Wizard is the main wizard page were the Final form Form field is written

import React, { useState } from "react";
import { Form } from "react-final-form";

type Wizard = {
  onSubmit: (values: Values) => void;
};

type Values = {
  name: String;
  surname: String;
  email: String;
  password: String;
  city: String;
  birthDay: Number;
  birthMonth: Number;
  birthYear: Number;
};

// 3-steps form
const Wizard: React.FC<Wizard> = ({ onSubmit, children }) => {
  const [page, setPage] = useState(0);
  const [values, setValues] = useState<Values | undefined>(undefined);
  const activePage = React.Children.toArray(children)[page];
  const isLastPage = page === React.Children.count(children) - 1;
  console.log("CONNECTED");
  //   const static Page = (children) => children;

  // next page
  const next = (values: Values) => {
    setPage(Math.min(page + 1, React.Children.count(children)));
    setValues(values);
  };

  // previous page
  const previous = () => {
    setPage(Math.max(page - 1, 0));
  };

  const handleSubmit = (values: Values) => {
    const isLastPage = page === React.Children.count(children) - 1;
    if (isLastPage) {
      return onSubmit(values);
    } else {
      next(values);
    }
  };

  return (
    <Form onSubmit={handleSubmit}>
      {({ handleSubmit, submitting, values }) => {
        <form onSubmit={handleSubmit}>
          {activePage}
          <div className="buttons">
            {page > 0 && (
              <button type="button" onClick={previous}>
                « Powrót
              </button>
            )}
            {!isLastPage && <button type="submit">Dalej »</button>}
            {isLastPage && (
              <button type="submit" disabled={submitting}>
                Zakończ
              </button>
            )}
          </div>
        </form>;
      }}
    </Form>
  );
};

export default Wizard;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

WizardPage component, as per example given is React final form -wizard example I changed it into typescript while doing that static Page = ({ children }) => children was throwing error so I moved it to different component.

import React from "react";

type props = {
  children: React.ReactNode;
};

export const WizardPage: React.FC<props> = ({ children }) => {
  console.log(children);

  return <div>{children}</div>;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

BusinessRegister is the main page were the component is getting rendered.

import React from "react";
import Wizard from "./Wizard";
import { WizardPage } from "./WizardPage";
import { Field } from "react-final-form";

const BusinessRegister: React.FC = () => {
  const onSubmit = () => {
    console.log("onSubmit");
  };

  return (
    <div>
      <h1>Step form</h1>
      <Wizard onSubmit={onSubmit}>
        <WizardPage>Page 1</WizardPage>
        <WizardPage>Page 2</WizardPage>
        <WizardPage>Page 3</WizardPage>
      </Wizard>
    </div>
  );
};

export default BusinessRegister;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I am not able to see any form fields right now ..though when I integrate the step form without using typescript then all fields are getting displayed.

Answer 1

I found what was wrong,

{({ handleSubmit, submitting, values }) => {
    <form onSubmit={handleSubmit}>
      {activePage}
      <div className="buttons">
        {page > 0 && (
          <button type="button" onClick={previous}>
            « Powrót
          </button>
        )}
        {!isLastPage && <button type="submit">Dalej »</button>}
        {isLastPage && (
          <button type="submit" disabled={submitting}>
            Zakończ
          </button>
        )}
      </div>
    </form>;
  }}

In here I haven't added the return for form that was the reason the form was not getting displayed. Thank you