ReferenceError: fullName is not defined

Question

I have to create is a registration form that consists of full name, email, password, mobile number, DOB and once the email validation is done and once the submit button is clicked, it should direct me to the login page. The login page has an email and password (the details from registration need not match the login) and once the button is clicked(after the validation) it should display "Welcome". I'm sharing the files here. Used, react-router, Material UI.

Login.js

/* eslint-disable no-undef */
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Grid, Paper, TextField } from "@material-ui/core";
import { Button } from "@material-ui/core";
import Welcome from './Welcome';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      errors: {},
    };
    this.validate = this.validate.bind(this);
  }

  validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  validate() {
    const { email, password, errors } = this.state;
   
    if (!this.validateEmail(email)) {
      errors.email = "Provide valid email";
    }

    if (password.length > 5) {
      errors.password = "Provide min 5-digit password";
    }

    if (errors) {
      this.setState({ errors });
    } else {
      this.props.location.push('/Welcome');
    }
  }
      
  render() {
    const paperStyle = {
      padding: 20,
      height: "70vh",
      width: 280,
      margin: "20px auto",
    };

    return (
      <Grid>
        <Paper elevation={10} style={paperStyle}>
          <Grid align="center">
            <h2>Login</h2>
          </Grid>

          <TextField
            error={errors.email}
            label="Email"
            placeholder="Enter mail"
            fullwidth
            value={email}
            onChange={(e) => this.setState({ email: e.target.value })}
            required
            helperText={errors.password}
          />

          <TextField
            error={errors.password}
            label="Password"
            placeholder="Enter password"
            type="password"
            fullwidth
            required
            value={password}
            onChange={(e) => this.setState({ password: e.target.value })}
            helperText={errors.password}
          />

          {/*<Link to="/Welcome">*/}  
          <Button variant="contained" color="primary" onClick={this.validate}>
            Login
          </Button>
          {/*</Link> */}
        </Paper>
      </Grid>
     ); 
   }
 }

 export default Login;

Registration.js

/* eslint-disable no-undef */
import React, { Component} from 'react';

import { Link } from "react-router-dom";
import { Grid, Paper, TextField } from "@material-ui/core";
import { Button } from "@material-ui/core";
import Login from './Login';
    
class Registration extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullName: "",
      mobileNumber: "",
      email: "",
      password: "",
      errors: {},
    };
    
    this.validate = this.validate.bind(this);
  }
      
  validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }
  
  validate() {
    const { fullName, email, password, errors } = this.state;
   
    if (!this.validateEmail(email)){
      errors.email = "Provide valid email";
    } 

    if (password.length > 5){
      errors.password = "Provide min 5-digit password";    
    } 
  
    if (errors) {
      this.setState({ errors });        
    } else {
      this.props.location.push('/Login');
    } 
  }

  render() {
    const paperStyle = {
      padding: 20,
      height: "70vh",
      width: 280,
      margin: "20px auto",
    };

    return (
      <Grid>
        <Paper elevation={10} style={paperStyle}>
          <Grid align="center">
            <h2>Login</h2>
          </Grid>

          <TextField
            label="Full name"
            placeholder="Enter name"
            fullwidth
            value={fullName}
            onChange={(e) => this.setState({ fullName: e.target.value })}
            required
            helperText={errors.fullName}
          />

          <TextField                
            type = 'number'
            label="Mobile number"
            placeholder="Enter mobile number"
            fullwidth
            // eslint-disable-next-line no-undef
            value={mobileNumber}
            onChange={(e) => this.setState({ mobileNumber: e.target.value })}
            required
            helperText={errors.mobileNumber}
          />

          <TextField
            error={errors.email}
            label="Email"
            placeholder="Enter mail"
            fullwidth
            value={email}
            onChange={(e) => this.setState({ email: e.target.value })}
            required
            helperText={errors.email}
          />

          <TextField
            error={errors.password}
            label="Password"
            placeholder="Enter password"
            type="password"
            fullwidth
            required
            value={password}
            onChange={(e) => this.setState({ password: e.target.value })}
            helperText={errors.password}
          />
          {/*<Link to="/Login">*/} 
          <Button variant="contained" color="primary" onClick={this.validate}>
            Register here
          </Button>
          {/*</Link>*/}
        </Paper>
      </Grid>
    );
  }
}

export default Registration;

App.js

import React, { Component } from "react";
import "./App.css";
import Login from "./Login";
import Registration from "./Registration";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Welcome from "./Welcome";
import { Typography } from "@material-ui/core";

class App extends Component {
  render() {
    return (
      <Router>
        <Typography>
          <div className="App">
            <Switch>
              <Route path="/" exact component={Registration} />
              <Route path="/Login" component={Login} />
              <Route path="/Welcome" component={Welcome} />
            </Switch>
          </div>
        </Typography>
      </Router>
    );
  }
}

export default App;

Welcome js

import React from "react";

function Welcome() {
  return <h1>Welcome</h1>;
}
export default Welcome;

Answer 1

You need add const { fullName, email, password, errors } = this.state; in the render and before return