प्रतिक्रिया पृष्ठ प्रतिपादन रिक्त [नकल]

मैं यह है, मेरे पूरे प्रतिक्रिया पृष्ठ:

 import React, { useState, useEffect } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { useMemo } from "react";
import { connect } from "react-redux";

import AdminNav from "../../../components/admin/AdminNav"
import AdminAboutUsNav from "../../../components/admin/AdminAboutUsNav"
import Header from "../../../components/app/Header";
import { setNavTabValue } from '../../../store/actions/navTab';

import { makeStyles, withStyles } from "@material-ui/core/styles";
import "../../../styles/AddMembershipPage.css";

const AddMembershipPage = (props) => {
  const history = useHistory();
  const [myData, setMyData] = useState({});


    let ssoDetails = {
        name: props.blue.preferredFirstName + " " + props.preferredLastName,
        email: props.blue.preferredIdentity,
        cnum: props.blue.uid,
        empType: "part-time"
    }

    this.state = {
        cnum: ssoDetails.cnum,
        empType: ssoDetails.empType,
        email: ssoDetails.email,
        name: ssoDetails.name,
        phone: "",
        // building: building,
        siteList: "",
        status: ""
    };

    const handleInputChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        var date = Date().toLocaleString();
        const { cnum, empType, email, name, phone, siteList, status } = this.state;

        const selections = {
            cnum: cnum,
            empType: empType,
            email: email,
            name: name,
            phone: phone,
            // building: building,
            siteList: siteList,
            status: status
        };

        axios
            .post("/newMembership", selections)
            .then(
                () => console.log("updating", selections),
                (window.location = "/admin/services")
            )
            .catch(function (error) {
                // alert(error)
                window.location = "/admin/services/new";
            });
    };


  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AdminNav />
      {/* <Header title="Services - Admin" /> */}
      {/* <AdminAboutUsNav /> */}
      <div className="App">
        <form onSubmit={this.handleSubmit}>
            <h1>Join Us!</h1>
            <input value={ssoDetails.name} readOnly name="name" onChange={this.handleInputChange}></input>
            <input type="email" value={ssoDetails.email} readOnly name="email" onChange={this.handleInputChange}></input>
            <input type="hidden" value={ssoDetails.cnum} readOnly name="cnum" onChange={this.handleInputChange}></input>
            <input type="text" value={ssoDetails.empType} readOnly name="empType" onChange={this.handleInputChange}></input>
            <input type="text" placeholder="Phone Number" name="phone" onChange={this.handleInputChange}></input>
            <input type="text" placeholder="Site List" name="siteList" onChange={this.handleInputChange}></input>
            {/* <input type="password" placeholder="Password"></input> */}
            <button type="submit">Register</button>
        </form>
      </div>
    </div>
  );
}

const mapStateToProps = (state) => {
    return {
        siteTab: state.siteTab,
        blue: state.blue
    }
}

const mapDispatchToProps = (dispatch, props) => ({
    setNavTabValue: (value) => dispatch(setNavTabValue(value))
});

export default connect(mapStateToProps, mapDispatchToProps)(AddMembershipPage);

हालांकि, जब मैं चलाने के लिए प्रयास करें, इस पृष्ठ पर, यह बस पता चलता है खाली. यह शुरू कर रही है इस के बाद मैं जोड़ा गया const handleInputChangeहै , और const handleSubmit करने के लिए कोड. मैं मूल रूप से बस की कोशिश कर रहा करने के लिए कोई प्रपत्र सबमिट करें, और यह और अधिक जटिल है, तो मैं कल्पना की है । इससे पहले कि मैं उन 2 बातें मैं सिर्फ उल्लेख किया है, पृष्ठ काम कर रहा था पूरी तरह से. लेकिन अब, मैं यह समझ से बाहर नहीं है, और वास्तव में का उपयोग कर सकता है कुछ मार्गदर्शन/सहायता करने के लिए इसे ठीक करने की कोशिश है । किसी भी विचार है?