Reacționează pagină este rendering gol [duplicat]

Am acest lucru, întreaga mea reacționa pagina:

 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);

cu toate acestea, atunci când am încercați să executați această pagină, acesta apare gol. A început să facă acest lucru după ce am adăugat const handleInputChangeși const handleSubmit la cod. Sunt de fapt doar încearcă să prezinte un formular, și este mult mai complexă atunci mi-am imaginat. Înainte am adaugat cele 2 lucruri de care am pomenit, pagina a fost de lucru perfect. dar acum, nu pot să-l dau afară, și într-adevăr ar putea utiliza unele de ghidare/help pentru a încerca să rezolve. orice idei?