React JS - 渲染后缺少分号

Question

I'm trying to build a basic crud app, and I'm having trouble understanding why my crud app doesn't render. I expect this is probably a really basic issue, but I'm new to coding (and Stack Overflow) in general so it's escaping me.

import { FormGroup, InputLabel, FormControl, Button, Input, makeStyles, Typography } from "@material-ui/core"
import react, { useState } from "react"
import { addContact } from "../Service/api";
import { useHistory } from "react-router-dom";
import * as React from 'react';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DatePicker from '@mui/lab/DatePicker';
import validator from 'validator';
import dayjs from 'dayjs';
import Alert from '@mui/material/Alert';
import { render } from "react-dom";
const useStyle = makeStyles({
    container: {
        width: '50%',
        margin: '5% 0 0 25%',
        '& > *': {
            marginTop: 20
        }
    }

})


const initialValues = {
    name: '',
    email: '',
    phone: '',
    location: ''
}
const AddContact = () => {
    const [contacts, setContact] = useState(initialValues);

    const { name, email, phone, location } = contacts;
    const classes = useStyle();
    const history = useHistory();

    const onValueChange = (e) => {
            setContact({ ...contact, [e.target.name]: e.target.value })
    }
    const [regdates, setValue] = React.useState(new Date());

    let regdate= parseInt(regdates.getMonth()+1) + "/"+ regdates.getDate() +"/"+regdates.getFullYear();
    
    const contact = {...contacts,regdate};
    console.log(contact);
    console.log(regdate);


    const addContactDetails = async () => {
        await addContact(contact);
        history.push('./AllContact');
    }
    const validate = () => {

        // Validation of Info
    
        let isValid = true;
    
        let name = '';
    
        let email = '';
    
        let contact = '';
    
        let location = '';
    
        let regDate = '';
    
    
    
        let nameCheck = this.refs.fullname.value;
    
        let emailCheck = this.refs.email.value;
    
        let contactCheck = this.refs.contact.value;
    
        let locationCheck = this.refs.location.value;
    
        let regDateCheck = this.refs.regdate.value;
        // Validation of full name

    if (nameCheck.length >= 30) {

        name = 'Full Name field accept up to 30 in size only';
  
        isValid = false;
  
        this.refs.fullname.value = '';
  
      }
  
      // Validation of full name to check if it has numbers
  
      if (typeof nameCheck !== 'undefined') {
  
        if (!nameCheck.match(/^[,.a-zA-Z\s]*$/)) {
  
          name = 'Full Name field accept characters values only';
  
          isValid = false;
  
          this.refs.fullname.value = '';
  
        }
  
      }
  
      if (!nameCheck) {
  
        name = 'Full Name field cannot be blank';
  
        isValid = false;
  
        this.refs.fullname.value = '';
  
      }
      // Validation of Email

    if (emailCheck.length >= 45) {

        email = 'Email Address field accept up to 45 in size only';
  
        this.refs.email.value = '';
  
        isValid = false;
  
      } else if (!validator.isEmail(emailCheck)) {
  
        email = 'Email Address field should have email domain';
  
        isValid = false;
  
        this.refs.email.value = '';
  
      }
      if (!emailCheck) {

        email = 'Email Address field cannot be blank';
  
        isValid = false;
  
        this.refs.email.value = '';
  
      }
  
  
  
      // Validation of contact number
  
      if (contactCheck.length !== 11) {
  
        contact = 'Contact Number field accept up to 11 in size only';
  
        this.refs.contact.value = '';
  
        isValid = false;
  
      }
  
      if (typeof contactCheck !== 'undefined') {
  
        if (!contactCheck.match(/^[0-9]*$/)) {
  
          contact = 'Contact Number field accept numeric values only';
  
          isValid = false;
  
          this.refs.contact.value = '';
  
        }
  
      }
  
      if (!contactCheck) {
  
        contact = 'Contact Number field cannot be blank';
  
        isValid = false;
  
        this.refs.contact.value = '';
  
      }
      // Validation of location

    if (!locationCheck) {

        location = 'Location field cannot be blank';
  
        isValid = false;
  
        this.refs.location.value = '';
  
      }
  
  
  
      // Validation of registered date
  
      if (!regDateCheck) {
  
        regDate = 'Registered Date field cannot be blank';
  
        isValid = false;
  
        this.refs.regdate.value = '';
  
      } else if (regDateCheck !== dayjs(new Date()).format('YYYY-MM-DD')) {
  
        regDate = 'Registered date field can only accept current date';
  
        isValid = false;
  
        this.refs.regdate.value = '';
  
      }
      if (!isValid) {

        this.setState({
  
          errors: {
  
            nameError: name,
  
            emailError: email,
  
            contactError: contact,
  
            locationError: location,
  
            regDateError: regDate,
  
          },
  
        });
  
        return false;
  
      }
  
      return true;
  
    };

    
   
render(){
return (
  <FormGroup className={classes.container}>
      <Typography variant="h4">Add Contact</Typography>
      <FormControl>
          <InputLabel>Full Name *</InputLabel>
          <Input onChange={(e) => onValueChange(e)} name='name' value={name} placeholder="Last Name, First Name Middle Initial" ref="fullname" defaultValue="" required />
          {this.state.errors['nameError'] ? (
                <Alert color="danger">
                  <strong>{this.state.errors['nameError']}!</strong>
                </Alert>
              ) : null}
      </FormControl>
      <FormControl>
          <InputLabel>Email Address *</InputLabel>
          <Input onChange={(e) => onValueChange(e)} name='email' value={email} placeholder="example@email.com" ref="email"  required/>
          {this.state.errors['emailError'] ? (
                <Alert color="danger">
                  <strong>{this.state.errors['emailError']}!</strong>
                </Alert>
              ) : null}
      </FormControl>
      <FormControl>
          <InputLabel>Contact Number *</InputLabel>
          <Input onChange={(e) => onValueChange(e)} name='phone' value={phone} placeholder="09XXXXXXXXX" required/>
          {this.state.errors['contactError'] ? (
                <Alert color="danger">
                  <strong>{this.state.errors['contactError']}!</strong>
                </Alert>
              ) : null}
      </FormControl>
      <Box sx={{ minWidth: 120 }}>
      <InputLabel>Location *</InputLabel>

          <FormControl fullWidth>
              <Select
                  required
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  onChange={(e) => onValueChange(e)}
                  value={location}
                  label="location"
                  name="location"
                  ref="location"
              >
                  <MenuItem value="">Select Location</MenuItem>
                  <MenuItem value="Manila">Manila</MenuItem>
                  <MenuItem value="Cebu">Cebu</MenuItem>
              </Select>
              {this.state.errors['locationError'] ? (
                <Alert color="danger">
                  <strong>{this.state.errors['locationError']}!</strong>
                </Alert>
              ) : null}
          </FormControl>
      </Box>
      <FormControl>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DatePicker
    disableFuture
    label="Register Date*"
    views={['year', 'month', 'day']}
    value={regdates}
    name='regdate'
    ref="regdate"
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
  
</LocalizationProvider>
{this.state.errors['regDateError'] ? (
                <Alert color="danger">
                  <strong>{this.state.errors['regDateError']}!</strong>
                </Alert>
              ) : null}
      </FormControl>
      <Button variant="contained" onClick={() => addContactDetails()} color="primary">Add Contact</Button>
  </FormGroup>
)
}
}
export default AddContact

This should display a list of available chat rooms and an input field for adding more, but the error message is as follows:

    Failed to compile.
[0]
[0] ./src/Components/AddContact.jsx
[0] SyntaxError: C:\ReactJS\CRUD\crud-app\src\Components\AddContact.jsx: Missing semicolon (254:8)
[0]
[0]   252 |
[0]   253 |
[0] > 254 | render(){
[0]       |         ^
[0]   255 | return (
[0]   256 |   <FormGroup className={classes.container}>
[0]   257 |       <Typography variant="h4">Add Contact</Typography>

Answer 1

you're confusing two different structures.

In your case, you can just remove the render:

 render(){

}

Leave just the

return (
//your code
);

I found this article, it explains the main differences between the structures. https://samarthnehe.medium.com/react-hooks-vs-class-components-c344b59f3bc