Improved layout of form. Actually got data sending over a GET form method.

src/components/ReportForm.js

@@ -1,19 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import classNames from 'classnames';
+import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
 
+/**
+ * Styles that the different
+ * Material UI components pull
+ * in. Mostly used for spacing.
+ */
 const styles = theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
+    flexBasis: 280,
+  },
+  button: {
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 2,
   },
   dense: {
     marginTop: 30,
@@ -23,6 +35,14 @@ const styles = theme => ({
   },
 });
 
+/**
+ * Function for formatting the
+ * date as a string that
+ * Material UI can use. We'll
+ * also store the date like
+ * this string in the database.
+ * @param {*} date, Date passed in. 
+ */
 function formatDate(date) {
     var d = new Date(date),
         month = '' + (d.getMonth() + 1),
@@ -95,29 +115,48 @@ const confidenceLevels = [
     },
   ];
 
+/**
+ * The form compnent.
+ */
 class ReportForm extends React.Component {
+  /**
+   * State of form components.
+   */
   state = {
     date: formatDate(new Date()),
     time: '00:00',
-    multiline: 'Controlled',
     type: '',
     confidence: ''
   };
 
+  /**
+   * Handles state change in form
+   * components.
+   */
   handleChange = name => event => {
     this.setState({
       [name]: event.target.value,
     });
   };
 
+  /**
+   * The render method for this component.
+   */
   render() {
     const { classes } = this.props;
 
+    /**
+     * The actual form.
+     */
     return (
-      <form className={classes.container} noValidate autoComplete="off">
+      <form className={classes.container} noValidate autoComplete="off" method='GET'>
+        <Grid container spacing={8}>
+                <Grid item xs={5} xl={2}>
                     <TextField
                     id="select-sighting-type"
                     select
+                    required
+                    name="sighting-type"
                     label="Select"
                     className={classes.textField}
                     value={this.state.type}
@@ -128,8 +167,6 @@ class ReportForm extends React.Component {
                         },
                     }}
                     helperText="Please select type of sighting"
-          margin="normal"
-          variant="outlined"
                     >
                     {sightingTypes.map(option => (
                         <MenuItem key={option.value} value={option.value}>
@@ -137,10 +174,14 @@ class ReportForm extends React.Component {
                         </MenuItem>
                     ))}
                     </TextField>
+                </Grid>
 
+                <Grid item xs={5} xl={2}>
                     <TextField
                     id="select-confidence"
                     select
+                    required
+                    name="sighting-confidence"
                     label="Select"
                     className={classes.textField}
                     value={this.state.confidence}
@@ -151,8 +192,6 @@ class ReportForm extends React.Component {
                         },
                     }}
                     helperText="Please select confidence in sighting"
-          margin="normal"
-          variant="outlined"
                     >
                     {confidenceLevels.map(option => (
                         <MenuItem key={option.value} value={option.value}>
@@ -160,10 +199,14 @@ class ReportForm extends React.Component {
                         </MenuItem>
                     ))}
                     </TextField>
+                </Grid>
 
+                <Grid item xs={12}>
                     <TextField
                         id="sighting-date"
+                        required
                         label="Sighting date"
+                        name="sighting-date"
                         type="date"
                         value={this.state.date}
                         className={classes.textField}
@@ -172,11 +215,16 @@ class ReportForm extends React.Component {
                         shrink: true,
                         }}
                     />
+                </Grid>
 
+                <Grid item xs={12}>
                     <TextField
                         id="sighting-time"
+                        required
                         label="Sighting time"
+                        name="sighting-time"
                         type="time"
+                        margin="normal"
                         value={this.state.time}
                         className={classes.textField}
                         onChange={this.handleChange('time')}
@@ -184,9 +232,14 @@ class ReportForm extends React.Component {
                         shrink: true,
                         }}
                     />
+                </Grid>
+
+                <Grid item xs={12}>
                     <TextField
                     id="sighting-description"
+                    required
                     label="Description"
+                    name="sighting-desc"
                     multiline
                     rows="5"
                     placeholder="Describe the sighting to the best of your ability."
@@ -198,6 +251,14 @@ class ReportForm extends React.Component {
                         shrink: true,
                     }}
                     />
+                </Grid>
+                
+                <Grid item xs={12}>
+                    <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                        Submit
+                    </Button>
+                </Grid>
+        </Grid>
       </form>
     );
   }

src/pages/Report.js

@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 class Report extends Component {
     render() {
         return (
-            <Typography variant='display1' align='center' gutterBottom>
+            <Typography variant='display1' align='left' gutterBottom>
             <ReportForm/>
             </Typography>
         );