Create wizard using Tab in React Tabs component

01 Feb 2023 / 10 minutes to read

Tab items can be disabled dynamically by passing the index and boolean value with the enableTab method and also passing index or HTML element to select an item from the tab using select method.

Create the following contents for each tab in the wizard.

Search tab: Created with DropDownList to select the source, destination and type of ticket. A DatePicker for choosing the date of journey.
Train tab: Based on the selected start and end point, populated Grid with random list of available seats and train list. Initially define the columns and row selected event for validating, after the source and destination chosen update the dataSource for the Grid.
Passenger tab: A table with Textbox, Numeric, DropDownList for adding passenger name, age, gender and preferred berth/seat. Add validation on entering passenger details to proceed.
Payment tab: Calculate the ticket cost based on location, passenger count and ticket type. Generate data for Grid with passenger details, train number and ticket cost summary.

You can go back on each tab using buttons available in it and tabs are disabled to navigate through tab header click actions. Once you end the wizard all the data get cleared and wizard goes back to starting tab.

In the below demo, designed for simple train reservation module that enable/disable tab items based on sequential validation of each Tab content.

Source

Preview

index.jsx

index.html

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
function App() {
    let alertDlg;
    let tab;
    let ticketDetailGrid;
    let pass_gender3;
    let pass_gender2;
    let pass_gender1;
    let pass_berth1;
    let pass_berth2;
    let pass_berth3;
    let pass_age1;
    let availTrainGrid;
    let ticketType;
    let journeyDate;
    let endPoint;
    let startPoint;
    let today = new Date();
    let selectedTrain;
    let dlgTarget = document.querySelector(".sb-content-tab.e-tab .e-content.sb-sample-content-area");
    let dateMin = new Date(today.getTime());
    let dateMax = new Date(today.getTime() + 60 * 24 * 60 * 60 * 1000);
    let fields = { id: "id", text: "text", value: "text" };
    let autoCompleteFields = { text: "name", value: "name" };
    const headerText = [
        { text: "New Booking" },
        { text: "Train List" },
        { text: "Add Passenger" },
        { text: "Make Payment" }
    ];
    const quotas = [
        { id: "1", text: "Business Class" },
        { id: "2", text: "Economy Class" },
        { id: "4", text: "Common Class" }
    ];
    const gender = [{ id: "1", text: "Male" }, { id: "2", text: "Female" }];
    const berths = [
        { id: "1", text: "Upper" },
        { id: "2", text: "Lower" },
        { id: "3", text: "Middle" },
        { id: "4", text: "Window" },
        { id: "5", text: "Aisle" }
    ];
    const cities = [
        { name: "Chicago", fare: 300 },
        { name: "San Francisco", fare: 125 },
        { name: "Los Angeles", fare: 175 },
        { name: "Seattle", fare: 250 },
        { name: "Florida", fare: 150 }
    ];
    const dlgButtons = [
        {
            buttonModel: { content: "OK", isPrimary: true },
            // tslint:disable-next-line: no-empty
            click: () => {
                alertDlg.hide();
                tab.enableTab(0, true);
                tab.enableTab(1, false);
                tab.enableTab(2, false);
                tab.enableTab(3, false);
                tab.select(0);
            }
        }
    ];
    const dlgCreated = () => {
        alertDlg.hide();
    };
    const focusIn = () => {
        let proxy;
        proxy.show();
    };
    function tabSelected(e) {
        if (e.isSwiped) {
            e.cancel = true;
        }
    }
    const trainSelected = (args) => {
        selectedTrain = args.data;
    };
    const btnClicked = (e) => {
        switch (e.target.id) {
            case "searchNext":
                /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
                if (startPoint.value != null &&
                    endPoint.value != null &&
                    ticketType.value != null &&
                    journeyDate.value != null) {
                    if (startPoint.value &&
                        startPoint.value === endPoint.value) {
                        document.getElementById("err1").innerText =
                            "* Arrival point can't be same as Departure";
                    }
                    else {
                        tab.enableTab(0, false);
                        tab.enableTab(1, true);
                        filterTrains(e);
                        tab.select(1);
                        document.getElementById("err1").innerText = "";
                        if (document.getElementById("err2")) {
                            document.getElementById("err2").innerText = "";
                        }
                    }
                }
                else {
                    document.getElementById("err1").innerText =
                        "* Please fill all the details before proceeding";
                }
                break;
            case "bookTickets":
                /* Based on the selected station generate Grid content to display trains available */
                if (availTrainGrid.getSelectedRecords() === undefined ||
                    availTrainGrid.getSelectedRecords().length === 0) {
                    document.getElementById("err2").innerText =
                        "* Select your convenient train";
                }
                else {
                    tab.enableTab(2, true);
                    tab.select(2);
                    tab.enableTab(1, false);
                    document.getElementById("err2").innerText = "";
                }
                break;
            case "confirmTickets":
                /* Get the Passenger details and validate the fields must not be left empty */
                const name = document.getElementById("pass_name1");
                const age = pass_age1.value;
                const gender = pass_gender1.value;
                if (name.value === "" || age === "" || gender === "") {
                    document.getElementById("err3").innerText =
                        "* Please enter passenger details";
                }
                else {
                    tab.enableTab(3, true);
                    tab.select(3);
                    tab.enableTab(2, false);
                    document.getElementById("err3").innerText = "";
                    finalizeDetails(e);
                }
                break;
            case "makePayment":
                alertDlg.show();
                break;
            case "goToSearch":
                /* Go back to change class, date or boarding places */
                selectedTrain = [];
                tab.enableTab(0, true);
                tab.select(0);
                tab.enableTab(1, false);
                break;
            case "goBackToBook":
                /* Change the preferred train chosen already */
                tab.enableTab(1, true);
                tab.select(1);
                tab.enableTab(2, false);
                break;
            case "goBackDetails":
                /* Update passenger detail before confirming the payment */
                tab.enableTab(2, true);
                tab.select(2);
                tab.enableTab(3, false);
                break;
        }
    };
    const filterTrains = (args) => {
        /* Generating trains based on source and destination chosen */
        const result = [];
        const fromCity = startPoint.value;
        const toCity = endPoint.value;
        const count = Math.floor(Math.random() * 3 + 2);
        for (let i = 0; i < count; i++) {
            // tslint:disable-next-line: ban-types
            const details = {};
            details.TrainNo = Math.floor(Math.random() * 20 + 19000);
            details.Name = "Train " + i;
            details.Departure = fromCity;
            details.Arrival = toCity;
            details.Availability = Math.floor(Math.random() * 20 + 20);
            result.push(details);
        }
        setTimeout(() => {
            availTrainGrid.dataSource = result;
            availTrainGrid.dataBind();
        }, 100);
    };
    const finalizeDetails = (args) => {
        /* Get the passenger details and update table with name and other details for confirmation */
        const reserved = [];
        let passCount = 0;
        const name1 = document.getElementById("pass_name1");
        const name2 = document.getElementById("pass_name2");
        const name3 = document.getElementById("pass_name3");
        for (let i = 1; i <= 3; i++) {
            if (name1.value !== "") {
                // tslint:disable-next-line: ban-types
                const details = {};
                const gender = (i === 1
                    ? pass_gender1.value
                    : i === 2
                        ? pass_gender2.value
                        : pass_gender3.value);
                const berth = (i === 1
                    ? pass_berth1.value
                    : i === 2
                        ? pass_berth2.value
                        : pass_berth3.value);
                details.TrainNo = selectedTrain.TrainNo.toString();
                details.PassName =
                    i === 1 ? name1.value : i === 2 ? name2.value : name3.value;
                details.Gender = gender === "" ? "Male" : gender;
                details.Berth = berth === "" ? berth : "Any";
                if (details.PassName !== "") {
                    reserved.push(details);
                }
                passCount++;
            }
            let calcFare = 0;
            // tslint:disable-next-line: forin
            for (const j in cities) {
                if (startPoint.value === cities[j].name) {
                    calcFare = calcFare + cities[j].fare;
                }
                if (endPoint.value === cities[j].name) {
                    calcFare = calcFare + cities[j].fare;
                }
            }
            const displayAmt = document.getElementById("amount");
            if (ticketType.value === "Economy Class" && displayAmt) {
                displayAmt.innerText =
                    "Total payable amount: $" + passCount * (300 + calcFare);
            }
            else if (ticketType.value === "Business Class" && displayAmt) {
                displayAmt.innerText =
                    "Total payable amount: $" + passCount * (500 + calcFare);
            }
            else if (ticketType.value === "Common Class" && displayAmt) {
                displayAmt.innerText =
                    "Total payable amount: $" + passCount * (150 + calcFare);
            }
        }
        setTimeout(() => {
            (ticketDetailGrid || []).dataSource = reserved;
            ticketDetailGrid.dataBind();
        }, 100);
    };
    function content0() {
        return (<div id="booking">
    <div className="wizard-title">Plan your journey</div>
    <div className="responsive-align">
      <div className="row">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent ref={dropdownlist => {
            startPoint = dropdownlist;
        }} width="100%" dataSource={cities} fields={autoCompleteFields} placeholder="From" floatLabelType="Auto"/>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent ref={dropdownlist => {
            endPoint = dropdownlist;
        }} width="100%" dataSource={cities} fields={autoCompleteFields} placeholder="To" floatLabelType="Auto"/>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DatePickerComponent ref={calendar => (journeyDate = calendar)} width="100%" placeholder="Journey Date" floatLabelType="Auto" min={dateMin} max={dateMax} focus={focusIn}/>
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent ref={dropdownlist => (ticketType = dropdownlist)} dataSource={quotas} placeholder="Ticket type" floatLabelType="Auto" fields={fields}/>
        </div>
      </div>
      <div className="btn-container">
        <button id="searchNext" className="e-btn" onClick={btnClicked}>
          Search Train
        </button>
      </div>
      <span id="err1"/>
    </div>
  </div>);
    }
    function content1() {
        return (<div id="selectTrain">
    <div className="wizard-title">Select the train from the list </div>
    <GridComponent ref={grid => (availTrainGrid = grid)} width="100%" rowSelected={trainSelected}>
      <ColumnsDirective>
        <ColumnDirective field="TrainNo" headerText="Train No" width={120} type="number"/>
        <ColumnDirective field="Name" headerText="Name" width={140}/>
        <ColumnDirective field="Departure" headerText="Departure" width={120}/>
        <ColumnDirective field="Arrival" headerText="Arrival" width={140}/>
        <ColumnDirective field="Availability" headerText="Availability" width={140} type="number"/>
      </ColumnsDirective>
    </GridComponent>
    <br />
    <div className="btn-container">
      <button id="goToSearch" className="e-btn" onClick={btnClicked}>
        Back
      </button>
      <button id="bookTickets" className="e-btn" onClick={btnClicked}>
        Continue
      </button>
    </div>
    <span id="err2"/>
  </div>);
    }
    function content2() {
        return (<div id="details">
    <div className="details-page wizard-title">
      Enter the passenger details
    </div>
    <div id="PassengersList">
      <table id="passenger-table">
        <colgroup>
          <col />
          <col />
          <col />
          <col />
          <col />
          <col />
        </colgroup>
        <thead>
          <tr>
            <th className="name-header">Name</th>
            <th className="age-header">Age</th>
            <th className="gender-header">Gender</th>
            <th className="type-header">Berth Preference</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input className="e-input" id="pass_name1" type="text" placeholder="Passenger Name"/>
            </td>
            <td>
              <NumericTextBoxComponent ref={numerictextbox => {
            pass_age1 = numerictextbox;
        }} showSpinButton={false} min={1} max={100} value={18} format="n0"/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_gender1 = dropdownlist;
        }} dataSource={gender} text="Male" fields={fields}/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_berth1 = dropdownlist;
        }} dataSource={berths} placeholder="Optional" fields={fields}/>
            </td>
          </tr>
          <tr>
            <td>
              <input id="pass_name2" className="e-input" type="text" placeholder="Passenger Name"/>
            </td>
            <td>
              <NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format="n0"/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_gender2 = dropdownlist;
        }} dataSource={gender} text="Male" fields={fields}/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_berth2 = dropdownlist;
        }} dataSource={berths} placeholder="Optional" fields={fields}/>
            </td>
          </tr>
          <tr>
            <td>
              <input id="pass_name3" className="e-input" type="text" placeholder="Passenger Name"/>
            </td>
            <td>
              <NumericTextBoxComponent showSpinButton={false} min={1} max={100} value={18} format="n0"/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_gender3 = dropdownlist;
        }} dataSource={gender} text="Male" fields={fields}/>
            </td>
            <td>
              <DropDownListComponent ref={dropdownlist => {
            pass_berth3 = dropdownlist;
        }} dataSource={berths} placeholder="Optional" fields={fields}/>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <div className="btn-container">
      <button id="goBackToBook" className="e-btn" onClick={btnClicked}>
        Back
      </button>
      <button id="confirmTickets" className="e-btn" onClick={btnClicked}>
        Continue
      </button>
    </div>
    <span id="err3"/>
  </div>);
    }
    function content3() {
        return (<div id="confirm">
    <div className="tab-title1 wizard-title">
      Confirm the details and proceed
    </div>
    <GridComponent ref={grid => (ticketDetailGrid = grid)} width="100%">
      <ColumnsDirective>
        <ColumnDirective field="TrainNo" headerText="Train No" width={120} type="number"/>
        <ColumnDirective field="PassName" headerText="Name" width={140}/>
        <ColumnDirective field="Gender" headerText="Gender" width={120}/>
        <ColumnDirective field="Berth" headerText="Berth" width={140}/>
      </ColumnsDirective>
    </GridComponent>
    <br />
    <div id="amount"/>
    <br />
    <div className="btn-container">
      <button id="goBackDetails" className="e-btn" onClick={btnClicked}>
        Back
      </button>
      <button id="makePayment" className="e-btn" onClick={btnClicked}>
        Pay
      </button>
    </div>
  </div>);
    }
    return (<div>
  <div className="col-lg-12 control-section e-tab-section">
    <div className="e-sample-resize-container">
      <TabComponent id="tab-wizard" ref={tab => (tab = tab)} heightAdjustMode="None" height={390} selecting={tabSelected}>
        <TabItemsDirective>
          <TabItemDirective header={headerText[0]} content={content0}/>
          <TabItemDirective header={headerText[1]} content={content1} disabled={true}/>
          <TabItemDirective header={headerText[2]} content={content2} disabled={true}/>
          <TabItemDirective header={headerText[3]} content={content3} disabled={true}/>
        </TabItemsDirective>
      </TabComponent>
      <DialogComponent ref={dialog => (alertDlg = dialog)} header="Success" width={250} isModal={true} visible={false} showCloseIcon={true} content="Your payment successfully processed" target={dlgTarget} buttons={dlgButtons} created={dlgCreated}/>
    </div>
  </div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { TabComponent, TabItemDirective, TabItemsDirective, SelectEventArgs } from '@syncfusion/ej2-react-navigations';
import { GridComponent, RowSelectEventArgs, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';

function App() {
  let alertDlg: DialogComponent;
  let tab: TabComponent;
  let ticketDetailGrid: GridComponent;
  let pass_gender3: DropDownListComponent;
  let pass_gender2: DropDownListComponent;
  let pass_gender1: DropDownListComponent;
  let pass_berth1: DropDownListComponent;
  let pass_berth2: DropDownListComponent;
  let pass_berth3: DropDownListComponent;
  let pass_age1: NumericTextBoxComponent;
  let availTrainGrid: GridComponent;
  let ticketType: DropDownListComponent;
  let journeyDate: DatePickerComponent;
  let endPoint: DropDownListComponent;
  let startPoint: DropDownListComponent;
  let today: Date = new Date();
  let selectedTrain: any;
  let dlgTarget: HTMLElement = (document.querySelector(
".sb-content-tab.e-tab .e-content.sb-sample-content-area"
  ) as HTMLElement);
  let dateMin: Date = new Date(today.getTime());
  let dateMax: Date = new Date(
today.getTime() + 60 * 24 * 60 * 60 * 1000
  );
  let fields: Object = { id: "id", text: "text", value: "text" };
  let autoCompleteFields: Object = { text: "name", value: "name" };

  const headerText: any = [
{ text: "New Booking" },
{ text: "Train List" },
{ text: "Add Passenger" },
{ text: "Make Payment" }
  ];

  const quotas: any = [
{ id: "1", text: "Business Class" },
{ id: "2", text: "Economy Class" },
{ id: "4", text: "Common Class" }
  ];

  const gender: any = [{ id: "1", text: "Male" }, { id: "2", text: "Female" }];

  const berths: any = [
{ id: "1", text: "Upper" },
{ id: "2", text: "Lower" },
{ id: "3", text: "Middle" },
{ id: "4", text: "Window" },
{ id: "5", text: "Aisle" }
  ];
  const cities: any = [
{ name: "Chicago", fare: 300 },
{ name: "San Francisco", fare: 125 },
{ name: "Los Angeles", fare: 175 },
{ name: "Seattle", fare: 250 },
{ name: "Florida", fare: 150 }
  ];

  const dlgButtons: any = [
{
  buttonModel: { content: "OK", isPrimary: true },
  // tslint:disable-next-line: no-empty
  click: () => {

    alertDlg.hide();
    tab.enableTab(0, true);
    tab.enableTab(1, false);
    tab.enableTab(2, false);
    tab.enableTab(3, false);
    tab.select(0);
  }
}
  ];

  const dlgCreated = (): void => {
alertDlg.hide();
  }

  const focusIn = (): void => {
let proxy: any;
proxy.show();
  }

  function tabSelected(e: SelectEventArgs) {
if (e.isSwiped) {
  e.cancel = true;
}
  }

  const trainSelected = (args: RowSelectEventArgs): void => {
selectedTrain = args.data;
  }

  const btnClicked = (e: any): void => {
switch (e.target.id) {
  case "searchNext":
    /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
    if (
      startPoint.value != null &&
      endPoint.value != null &&
      ticketType.value != null &&
      journeyDate.value != null
    ) {
      if (
        startPoint.value &&
        startPoint.value === endPoint.value
      ) {
        (document.getElementById("err1") as HTMLElement).innerText =
          "* Arrival point can't be same as Departure";
      } else {
        tab.enableTab(0, false);
        tab.enableTab(1, true);
        filterTrains(e);
        tab.select(1);
        (document.getElementById("err1") as HTMLElement).innerText = "";
        if (document.getElementById("err2")) {
          (document.getElementById("err2") as HTMLElement).innerText = "";
        }
      }
    } else {
      (document.getElementById("err1") as HTMLElement).innerText =
        "* Please fill all the details before proceeding";
    }
    break;
  case "bookTickets":
    /* Based on the selected station generate Grid content to display trains available */
    if (
      availTrainGrid.getSelectedRecords() === undefined ||
      availTrainGrid.getSelectedRecords().length === 0
    ) {
      (document.getElementById("err2") as HTMLElement).innerText =
        "* Select your convenient train";
    } else {
      tab.enableTab(2, true);
      tab.select(2);
      tab.enableTab(1, false);
      (document.getElementById("err2") as HTMLElement).innerText = "";
    }
    break;
  case "confirmTickets":
    /* Get the Passenger details and validate the fields must not be left empty */
    const name: any = document.getElementById("pass_name1");
    const age: any = pass_age1.value;
    const gender: any = pass_gender1.value;
    if (name.value === "" || age === "" || gender === "") {
      (document.getElementById("err3") as HTMLElement).innerText =
        "* Please enter passenger details";
    } else {
      tab.enableTab(3, true);
      tab.select(3);
      tab.enableTab(2, false);
      (document.getElementById("err3") as HTMLElement).innerText = "";
      finalizeDetails(e);
    }
    break;
  case "makePayment":
    alertDlg.show();
    break;
  case "goToSearch":
    /* Go back to change class, date or boarding places */
    selectedTrain = [];
    tab.enableTab(0, true);
    tab.select(0);
    tab.enableTab(1, false);
    break;
  case "goBackToBook":
    /* Change the preferred train chosen already */
    tab.enableTab(1, true);
    tab.select(1);
    tab.enableTab(2, false);
    break;
  case "goBackDetails":
    /* Update passenger detail before confirming the payment */
    tab.enableTab(2, true);
    tab.select(2);
    tab.enableTab(3, false);
    break;
}
  }

  const filterTrains = (args: RowSelectEventArgs): void => {
/* Generating trains based on source and destination chosen */
const result: { [key: string]: Object }[] = [];
const fromCity: string = startPoint.value as string;
const toCity: string = endPoint.value as string;
const count: number = Math.floor(Math.random() * 3 + 2);

for (let i: number = 0; i < count; i++) {
  // tslint:disable-next-line: ban-types
  const details: { [key: string]: Object } = {};
  details.TrainNo = Math.floor(Math.random() * 20 + 19000);
  details.Name = "Train " + i;
  details.Departure = fromCity;
  details.Arrival = toCity;
  details.Availability = Math.floor(Math.random() * 20 + 20);
  result.push(details);
}
setTimeout(() => {
  availTrainGrid.dataSource = result;
  availTrainGrid.dataBind();
}, 100);
  }

  const finalizeDetails = (args: RowSelectEventArgs): void => {
/* Get the passenger details and update table with name and other details for confirmation */
const reserved: { [key: string]: Object }[] = [];
let passCount: any = 0;
const name1: any = document.getElementById("pass_name1");
const name2: any = document.getElementById("pass_name2");
const name3: any = document.getElementById("pass_name3");

for (let i: number = 1; i <= 3; i++) {
  if (name1.value !== "") {
    // tslint:disable-next-line: ban-types
    const details: { [key: string]: Object } = {};
    const gender: string = (i === 1
      ? pass_gender1.value
      : i === 2
        ? pass_gender2.value
        : pass_gender3.value) as string;
    const berth: string = (i === 1
      ? pass_berth1.value
      : i === 2
        ? pass_berth2.value
        : pass_berth3.value) as string;
    details.TrainNo = selectedTrain.TrainNo.toString();
    details.PassName =
      i === 1 ? name1.value : i === 2 ? name2.value : name3.value;
    details.Gender = gender === "" ? "Male" : gender;
    details.Berth = berth === "" ? berth : "Any";
    if (details.PassName !== "") {
      reserved.push(details);
    }
    passCount++;
  }
  let calcFare: any = 0;
  // tslint:disable-next-line: forin
  for (const j in cities) {
    if (startPoint.value === cities[j].name) {
      calcFare = calcFare + cities[j].fare;
    }
    if (endPoint.value === cities[j].name) {
      calcFare = calcFare + cities[j].fare;
    }
  }
  const displayAmt: any = document.getElementById("amount");
  if (ticketType.value === "Economy Class" && displayAmt) {
    displayAmt.innerText =
      "Total payable amount: $" + passCount * (300 + calcFare);
  } else if (ticketType.value === "Business Class" && displayAmt) {
    displayAmt.innerText =
      "Total payable amount: $" + passCount * (500 + calcFare);
  } else if (ticketType.value === "Common Class" && displayAmt) {
    displayAmt.innerText =
      "Total payable amount: $" + passCount * (150 + calcFare);
  }
}
setTimeout(() => {
  (ticketDetailGrid || []).dataSource = reserved;
  ticketDetailGrid.dataBind();
}, 100);
  }

  function content0() {
return (
  <div id="booking">
    <div className="wizard-title">Plan your journey</div>
    <div className="responsive-align">
      <div className="row">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent
            ref={dropdownlist => {
              startPoint = dropdownlist!;
            }}
            width="100%"
            dataSource={cities}
            fields={autoCompleteFields}
            placeholder="From"
            floatLabelType="Auto"
          />
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent
            ref={dropdownlist => {
              endPoint = dropdownlist!;
            }}
            width="100%"
            dataSource={cities}
            fields={autoCompleteFields}
            placeholder="To"
            floatLabelType="Auto"
          />
        </div>
      </div>
      <div className="row">
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DatePickerComponent
            ref={calendar => (journeyDate = calendar!)}
            width="100%"
            placeholder="Journey Date"
            floatLabelType="Auto"
            min={dateMin}
            max={dateMax}
            focus={focusIn}
          />
        </div>
        <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
          <DropDownListComponent
            ref={dropdownlist => (ticketType = dropdownlist!)}
            dataSource={quotas}
            placeholder="Ticket type"
            floatLabelType="Auto"
            fields={fields}
          />
        </div>
      </div>
      <div className="btn-container">
        <button
          id="searchNext"
          className="e-btn"
          onClick={btnClicked}
        >
          Search Train
        </button>
      </div>
      <span id="err1" />
    </div>
  </div>
);
  }

  function content1() {
return (
  <div id="selectTrain">
    <div className="wizard-title">Select the train from the list </div>
    <GridComponent
      ref={grid => (availTrainGrid = grid!)}
      width="100%"
      rowSelected={trainSelected}
    >
      <ColumnsDirective>
        <ColumnDirective
          field="TrainNo"
          headerText="Train No"
          width={120}
          type="number"
        />
        <ColumnDirective field="Name" headerText="Name" width={140} />
        <ColumnDirective
          field="Departure"
          headerText="Departure"
          width={120}
        />
        <ColumnDirective field="Arrival" headerText="Arrival" width={140} />
        <ColumnDirective
          field="Availability"
          headerText="Availability"
          width={140}
          type="number"
        />
      </ColumnsDirective>
    </GridComponent>
    <br />
    <div className="btn-container">
      <button
        id="goToSearch"
        className="e-btn"
        onClick={btnClicked}
      >
        Back
      </button>
      <button
        id="bookTickets"
        className="e-btn"
        onClick={btnClicked}
      >
        Continue
      </button>
    </div>
    <span id="err2" />
  </div>
);
  }

  function content2() {
return (
  <div id="details">
    <div className="details-page wizard-title">
      Enter the passenger details
    </div>
    <div id="PassengersList">
      <table id="passenger-table">
        <colgroup>
          <col />
          <col />
          <col />
          <col />
          <col />
          <col />
        </colgroup>
        <thead>
          <tr>
            <th className="name-header">Name</th>
            <th className="age-header">Age</th>
            <th className="gender-header">Gender</th>
            <th className="type-header">Berth Preference</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input
                className="e-input"
                id="pass_name1"
                type="text"
                placeholder="Passenger Name"
              />
            </td>
            <td>
              <NumericTextBoxComponent
                ref={numerictextbox => {
                  pass_age1 = numerictextbox!;
                }}
                showSpinButton={false}
                min={1}
                max={100}
                value={18}
                format="n0"
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_gender1 = dropdownlist!;
                }}
                dataSource={gender}
                text="Male"
                fields={fields}
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_berth1 = dropdownlist!;
                }}
                dataSource={berths}
                placeholder="Optional"
                fields={fields}
              />
            </td>
          </tr>
          <tr>
            <td>
              <input
                id="pass_name2"
                className="e-input"
                type="text"
                placeholder="Passenger Name"
              />
            </td>
            <td>
              <NumericTextBoxComponent
                showSpinButton={false}
                min={1}
                max={100}
                value={18}
                format="n0"
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_gender2 = dropdownlist as DropDownListComponent;
                }}
                dataSource={gender}
                text="Male"
                fields={fields}
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_berth2 = dropdownlist as DropDownListComponent;
                }}
                dataSource={berths}
                placeholder="Optional"
                fields={fields}
              />
            </td>
          </tr>
          <tr>
            <td>
              <input
                id="pass_name3"
                className="e-input"
                type="text"
                placeholder="Passenger Name"
              />
            </td>
            <td>
              <NumericTextBoxComponent
                showSpinButton={false}
                min={1}
                max={100}
                value={18}
                format="n0"
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_gender3 = dropdownlist as DropDownListComponent;
                }}
                dataSource={gender}
                text="Male"
                fields={fields}
              />
            </td>
            <td>
              <DropDownListComponent
                ref={dropdownlist => {
                  pass_berth3 = dropdownlist as DropDownListComponent;
                }}
                dataSource={berths}
                placeholder="Optional"
                fields={fields}
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <div className="btn-container">
      <button
        id="goBackToBook"
        className="e-btn"
        onClick={btnClicked}
      >
        Back
      </button>
      <button
        id="confirmTickets"
        className="e-btn"
        onClick={btnClicked}
      >
        Continue
      </button>
    </div>
    <span id="err3" />
  </div>
);
  }

  function content3() {
return (
  <div id="confirm">
    <div className="tab-title1 wizard-title">
      Confirm the details and proceed
    </div>
    <GridComponent
      ref={grid => (ticketDetailGrid = grid as GridComponent)}
      width="100%"
    >
      <ColumnsDirective>
        <ColumnDirective
          field="TrainNo"
          headerText="Train No"
          width={120}
          type="number"
        />
        <ColumnDirective field="PassName" headerText="Name" width={140} />
        <ColumnDirective field="Gender" headerText="Gender" width={120} />
        <ColumnDirective field="Berth" headerText="Berth" width={140} />
      </ColumnsDirective>
    </GridComponent>
    <br />
    <div id="amount" />
    <br />
    <div className="btn-container">
      <button
        id="goBackDetails"
        className="e-btn"
        onClick={btnClicked}
      >
        Back
      </button>
      <button
        id="makePayment"
        className="e-btn"
        onClick={btnClicked}
      >
        Pay
      </button>
    </div>
  </div>
);
  }
  return (
<div>
  <div className="col-lg-12 control-section e-tab-section">
    <div className="e-sample-resize-container">
      <TabComponent
        id="tab-wizard"
        ref={tab => (tab = tab!)}
        heightAdjustMode="None"
        height={390}
        selecting={tabSelected}
      >
        <TabItemsDirective>
          <TabItemDirective
            header={headerText[0]}
            content={content0}
          />
          <TabItemDirective
            header={headerText[1]}
            content={content1}
            disabled={true}
          />
          <TabItemDirective
            header={headerText[2]}
            content={content2}
            disabled={true}
          />
          <TabItemDirective
            header={headerText[3]}
            content={content3}
            disabled={true}
          />
        </TabItemsDirective>
      </TabComponent>
      <DialogComponent
        ref={dialog => (alertDlg = dialog!)}
        header="Success"
        width={250}
        isModal={true}
        visible={false}
        showCloseIcon={true}
        content="Your payment successfully processed"
        target={dlgTarget}
        buttons={dlgButtons}
        created={dlgCreated}
      />
    </div>
  </div>
</div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!