Some more Material UI code, forms and how to handle a form submission. More custom styles, using the POST method inside of fetch()

postingMaterialUIFormContentToJSONServer.js

import React, { useState } from 'react'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Container from '@material-ui/core/Container'
import KeyboardArrowRightOutlinedIcon from '@material-ui/icons/KeyboardArrowRightOutlined';
import { makeStyles, TextField, Radio, RadioGroup, FormControlLabel, FormLabel, FormControl } from '@material-ui/core'
import { useHistory } from 'react-router-dom'

const useStyles = makeStyles({
  field: {
    marginTop: 20,
    marginBotton: 20,
    display: 'block'
  }
 /*  btn: {
    fontSize: 60,
    backgroundColor: 'violet',
    '&:hover': {
      backgroundColor:'blue'
    }
  }, 
  title: {
    textDecoration: 'underline', 
    marginBottom: 20
  } */
})

export default function Create() {
  const history = useHistory()
  const [title, setTitle] = useState('')
  const [details, setDetails] = useState('')
  const [titleError, setTitleError] = useState(false)
  const [detailsError, setDetailsError] = useState(false)
  const [category, setCategory] = useState('todos')
  const classes = useStyles();

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

      setTitleError(false)
      setDetailsError(false)

      if(title==''){
        setTitleError(true)
      }

      if(details==''){
        setDetailsError(true)
      } 

      if(title && details) {
        fetch('http://localhost:8000/notes', {
          method: 'POST',
          headers: {"Content-type" : "application/json"},
          body: JSON.stringify({title, details, category})
        }).then(() => history.push('/'))
      }
  }

  return (
    <Container>
      <Typography 
        className={classes.title}
        variant="h6"
        color="textSecondary"
        align="left"
        component="h2"
        gutterBottom>
        Create a New Note.
      </Typography>

      <form noValidate autoComplete="off" onSubmit={handleSubmit}>
        <TextField
          onChange={(e) => setTitle(e.target.value)}
          label="Note Title"
          variant="outlined"
          color="secondary" 
          fullWidth
          required
          className={classes.field}
          error={titleError} />

          <TextField
          onChange={(e) => setDetails(e.target.value)}
          label="Details"
          variant="outlined"
          color="secondary"
          multiline
          rows={4} 
          fullWidth
          required
          className={classes.field}
          error={detailsError}/>
          <br />

          <FormControl className={classes.field}>
            <FormLabel>Note Category</FormLabel> 
            <RadioGroup value={category} onChange={(e) => setCategory(e.target.value)}>
              <FormControlLabel value="money" control={<Radio />} label="Money" />
              <FormControlLabel value="todos" control={<Radio />} label="Todos" />
              <FormControlLabel value="reminders" control={<Radio />} label="Reminders" />
              <FormControlLabel value="work" control={<Radio />} label="Work" />
            </RadioGroup>
          </FormControl> 
          
          <Button 
            type="submit" 
            color="secondary" 
            variant="contained"
            endIcon={<KeyboardArrowRightOutlinedIcon />}
            >Submit</Button>
      </form>
    </Container>
  )
}